DataGrid Image ItemRenderer -> Как изменить источник изображения других строк, а не только выбранной
У меня есть изображение в моей DataGrid. Его целью является воспроизведение и остановка звука, поэтому мне нужно менять источник изображения с изображения "Воспроизведение" на изображение "Стоп" каждый раз, когда я нажимаю на него.
Я уже выполнил это с помощью следующего кода:
<?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>
Но дело в том, что я хочу изменить источник изображения других строк DataGridColumn.
Например, если я щелкну изображение воспроизведения в одной строке, оно изменится на изображение остановки, все будет хорошо, пока здесь.
Если теперь я щелкну по изображению воспроизведения другой строки, оно также изменится на изображение остановки, но предыдущая строка все еще останется с изображением остановки, и я хочу, чтобы активным было только одно изображение остановки.
Другими словами, я хочу создать впечатление, что воспроизводится только один звук. Таким образом, только одна из строк может быть с изображением "Стоп", а остальные должны быть с изображением "Воспроизведение".
Итак, ¿как я могу перебрать рендерер элементов DataGridColumn и менять их источник изображения каждый раз, когда нажимаю на рендерер элементов?
2 ответа
Я публикую РЕШЕНИЕ, которое я основал для своей проблемы:
<?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" width="510" height="340"
showCloseButton="true" close="closeWindow()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
import mx.controls.Alert;
[Embed(source='../assets/play-btn-small.png')]
var Play:Class;
[Embed(source='../assets/stop-btn-small.png')]
var Stop:Class;
[Blindable]
public var dpc:ArrayCollection;
private function titlewindow1_initializeHandler(event)
{
ExternalInterface.addCallback('onFinishAudio', onFinishAudio);
ExternalInterface.addCallback('onStartAudio', onStartAudio);
}
private function closeWindow(){
PopUpManager.removePopUp(this);
ExternalInterface.call("pauseAudio");
}
private function onFinishAudio(audioId:String) {
for ( var audio:Object in dpc )
{
if (audio.audioId == audioId){
audio.status = 'stopped';
}
}
gridAudios.dataProvider = dpc;
dpc.refresh();
}
private function onStartAudio(audioId:String)
{
for ( var audio:Object in dpc )
{
if (audio.audioId != audioId)
{
if (audio.status == 'playing')
{
audio.status='stopped';
}
} else {
//Alert.show("Dgsg","Error");
audio.status='playing';
}
}
gridAudios.dataProvider = dpc;
dpc.refresh();
}
public function playAudio(audioURL:String, audioId:String){
ExternalInterface.call("playAudio", audioURL, id);
}
public function pauseAudio(){
ExternalInterface.call("pauseAudio");
}
]]>
</mx:Script>
<mx:Rotate id="rotate" />
<mx:Zoom id="zoom" />
<mx:VBox top="0" bottom="0" left="0" right="0" paddingTop="20" paddingLeft="20">
<mx:Text fontWeight="bold" height="20">
<mx:text>Click the play/pause button for listening/pause each audio individually:</mx:text>
</mx:Text>
</mx:VBox>
<mx:DataGrid id="gridAudios" top="50" bottom="20" left="20" right="20" width="100%" doubleClickEnabled="false">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="audioId"/>
<mx:DataGridColumn id="btnCol" headerText="" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:Script>
<![CDATA[
protected function image1_clickHandler(event:MouseEvent):void
{
if (data.status=='playing'){
outerDocument.pauseAudio();
data.status='';
}else{
outerDocument.playAudio(data.url,data.audioId);
data.status='playing';
}
}
]]>
</mx:Script>
<mx:Image click="image1_clickHandler(event)"
toolTip="{data.status=='playing' ? 'Stop' : 'Play'}"
useHandCursor="true" source="{data.status=='playing' ? outerDocument.Stop : outerDocument.Play}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:TitleWindow>
Где ключ к решению находится в свойстве источника объекта Image и в обработчике кликов.
Вы можете сохранить prev imgPlayStop как открытую статическую переменную в классе Model и использовать его
public class Model {
public static var prevImgPlayStop:Image;
}
в вашем itemRenderer делай так
private function changeImg(url:String):void{
if (Model.prevImgPlayStop) {
Model.prevImgPlayStop.currentState = "stopped";
}
/*your code*/
Model.prevImgPlayStop = imgPlayStop;
}