Actionscript 3 DataGrid Image ItemRenderer-->如何更改其他行(而不仅仅是选定行)的图像源
我的数据网格中有一个映像。它的目的是播放和停止音频,因此每次单击时,我需要将图像源从播放图像更改为停止图像 我已经通过下一个代码完成了这一点:Actionscript 3 DataGrid Image ItemRenderer-->如何更改其他行(而不仅仅是选定行)的图像源,actionscript-3,apache-flex,datagrid,itemrenderer,datagridcolumn,Actionscript 3,Apache Flex,Datagrid,Itemrenderer,Datagridcolumn,我的数据网格中有一个映像。它的目的是播放和停止音频,因此每次单击时,我需要将图像源从播放图像更改为停止图像 我已经通过下一个代码完成了这一点: <?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Audio List" horizontal
<?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的其他行的图像源
例如,如果我单击一行的播放图像,它将变为停止图像,直到这里一切正常
如果现在我单击另一行的播放图像,它也会更改为停止图像,但前一行仍保留停止图像,并且我希望只有一个停止图像处于活动状态
换句话说,我想给人的印象是只有一个音频正在播放。因此,只有一行可以包含停止图像,而其他行必须包含播放图像
那么,如何在每次单击items渲染器的某个部分时循环使用DataGridColumn items渲染器并更改其图像源?您可以将prev imgPlayStop保存为模型类中的公共静态变量并使用它
public class Model {
public static var prevImgPlayStop:Image;
}
在你的生活中,你喜欢这样做吗
private function changeImg(url:String):void{
if (Model.prevImgPlayStop) {
Model.prevImgPlayStop.currentState = "stopped";
}
/*your code*/
Model.prevImgPlayStop = imgPlayStop;
}
我发布了我为我的问题找到的解决方案:
<?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对象的source属性和click处理程序中。到目前为止还不起作用……也许我理解错了。它有助于保存prev状态,但每次单击一个ItemRenderer图像时,我仍然无法访问和更改所有DataGridColumn ItemsRenderer图像。这是我真正的问题。如果你能扩大你的答案。。。