1 Reply Latest reply on Jan 21, 2015 10:05 AM by Flex harUI

    DataGrid Image ItemRenderer --> How to change image source of other rows, not only the selected one

    daniegarcia254

      I have an Image <mx:itemRenderer> in my DataGrid. Its purpose is to play and stop an audio, so I need to change the image source from the "Play" image to the "Stop" image every time I click on it.

       

      I've already accomplished that with the next code:

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List" 

                      horizontalScrollPolicy="off" verticalScrollPolicy="auto"

                      showCloseButton="true" close="closeWindow()">

          <mx:Script>

              <![CDATA[

                  import flash.external.ExternalInterface;

                 

                  import mx.collections.ArrayCollection;

                  import mx.managers.PopUpManager;

                 

                  public var dpc:ArrayCollection;

                     

                  private function closeWindow(){

                      PopUpManager.removePopUp(this);

                      ExternalInterface.call("pauseAudio");

                  }

              ]]>

          </mx:Script>

          <mx:Rotate id="rotate" />

          <mx:Zoom id="zoom" />

          <mx:VBox width="100%" top="20">

              <mx:Text fontWeight="bold" top="20" left="20">

                  <mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>

              </mx:Text>

              <mx:DataGrid id="gridAudios" top="60" bottom="0" left="0" width="100%" height="100%" doubleClickEnabled="true">

                  <mx:columns>

                      <mx:DataGridColumn headerText="Name" dataField="audioId"/>

                      <mx:DataGridColumn id="btnCol" dataField="url" headerText="" textAlign="center">

                          <mx:itemRenderer>

                              <mx:Component>

                                  <mx:HBox>

                                      <mx:Image click="changeImg(data.url)" toolTip="Play"

                                            id="imgPlayStop" useHandCursor="true"/>

                                      <mx:Script>

                                          <![CDATA[

                                              import mx.states.State;

                                              import mx.collections.ArrayCollection;

                                             

                                              [Embed(source='../assets/play-btn-small.png')]

                                              [Bindable]

                                              public var Play:Class;

                                             

                                              [Embed(source='../assets/stop-btn-small.png')]

                                              [Bindable]

                                              public var Stop:Class;

                                             

                                              private function init():void

                                              {

                                                  imgPlayStop.source = Play

                                                 

                                                  var statePlaying:State = new State();

                                                  var stateStopped:State = new State();

                                                  statePlaying.name="playing";

                                                  stateStopped.name="stopped";

                                                     

                                                  var states:Array = new Array();

                                                  states.push(statePlaying);

                                                  states.push(stateStopped);

                                                 

                                                  imgPlayStop.states = states;

                                                 

                                                  imgPlayStop.currentState = "stopped";

                                              }

                                             

                                              private function changeImg(url:String):void{

                                                  if (imgPlayStop.currentState == "stopped"){

                                                      imgPlayStop.source = Stop;

                                                      imgPlayStop.currentState = "playing";

                                                      ExternalInterface.call("playAudio", url);

                                                     

                                                  } else {

                                                      imgPlayStop.source = Play;

                                                      imgPlayStop.currentState = "stopped";

                                                      ExternalInterface.call("pauseAudio");                                               

                                                  }

                                              }

                                          ]]>

                                      </mx:Script>

                                  </mx:HBox>

                              </mx:Component>

                          </mx:itemRenderer>

                      </mx:DataGridColumn>

                  </mx:columns>

              </mx:DataGrid>

          </mx:VBox>

      </mx:TitleWindow>

       

       

      But the thing is that I want to change the image source of the other rows of the DataGridColumn.

       

      For example, if I click in the play image of one row it changes to the stop image, everything OK till here.

      If now I click the play image of other row, it also changes to the stop image, but the previous row still remains with the stop image, and I want to be only one stope image active.

       

      In other words, I want to give the impression only one audio is playing. So only one of the rows can be with the "Stop" image while the rest must be with the "Play" image.

       

      So, ¿how can I loop through the DataGridColumn items renderer and change their image source every time I click in on of the items renderer?