更改 itemRemderer 的可见性
我在 AdvancedDataGrid 的一列中添加了按钮（最后一行）。 对于具有添加按钮的行，其余字段不可见。 单击添加按钮后，新行将添加到网格中供用户添加。 之后该按钮变为删除按钮（标签变为“-”，并在底部添加一个新行以添加另一行）。 当我单击删除按钮（标签“-”）时，最后一行获得添加按钮（“+”标签），但该行的字段变得可见。
有人可以解释一下吗 下面是示例代码
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400"
height="300"
initialize="group1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.AdvancedDataGridEvent;
import mx.events.CollectionEvent;
import mx.events.DataGridEvent;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
import spark.events.IndexChangeEvent;
protected function group1_initializeHandler(event:FlexEvent):void
{
alarms=new ArrayCollection();
alarms.addItem(initalarmRow());
//alarms.addEventListener(CollectionEvent.COLLECTION_CHANGE, populateFieldDetails);
alarms.addItem(populateFieldforButton());
populateEvents();
}
private var _addButton:Boolean
[Bindable]
public function get addButton():Boolean
{
return _addButton;
}
public function set addButton(value:Boolean):void
{
_addButton=value;
}
private var _alarms:ArrayCollection;
[Bindable]
public function get alarms():ArrayCollection
{
return _alarms;
}
public function set alarms(value:ArrayCollection):void
{
_alarms=value;
}
private var _alarmRow:alarmVO;
[Bindable]
public function get alarmRow():alarmVO
{
return _alarmRow;
}
public function set alarmRow(value:alarmVO):void
{
_alarmRow=value;
}
// Initiliaze an alarmVO for a new row
private function initalarmRow():alarmVO
{
alarmRow=new alarmVO();
alarmRow.buttonLabel='-';
channels=new ArrayCollection;
for (var i:int=0; i < 10; i++)
{
var vo:ChannelVO=new ChannelVO();
vo.id=i;
vo.name="channel_" + i;
vo.messageType="Message_" + i;
channels.addItem(vo);
}
alarmRow.eventName="Event_1";
alarmRow.channel=channels.getItemAt(5) as ChannelVO;
return alarmRow;
}
private var _events:ArrayCollection;
[Bindable]
public function get events():ArrayCollection
{
return _events;
}
public function set events(value:ArrayCollection):void
{
_events=value;
}
private var _channels:ArrayCollection;
[Bindable]
public function get channels():ArrayCollection
{
return _channels;
}
public function set channels(value:ArrayCollection):void
{
_channels=value;
}
public function populateFieldforButton():alarmVO
{
alarmRow=new alarmVO();
alarmRow.buttonLabel="+";
return alarmRow;
}
public function populateEvents():void
{
events=new ArrayCollection();
for (var i:int=0; i < 3; i++)
{
var event:EventVO=new EventVO();
event.id=i;
event.eventName="Event_" + i;
events.addItem(event);
}
}
public function populateFieldDetails(event:Event):void
{
for (var count:int; count < alarms.length; count++)
{
//trace('alarms.getItemAt(count).buttonLabel :' + alarms.getItemAt(count).buttonLabel);
if (alarms.getItemAt(count).buttonLabel == '+')
{
alarms.getItemAt(count).channel=null;
alarms.getItemAt(count).eventName=null;
}
adgdalarmManagement.invalidateDisplayList();
}
}
public function preventEditing(event:AdvancedDataGridEvent):void
{
//check if it is the last row(it should not be editable)
if (event.rowIndex == alarms.length - 1)
{
event.preventDefault();
//trace('**** :' + event.currentTarget);
}
}
public function adgdalarmManagement_creationCompleteHandler(event:FlexEvent):void
{
}
protected function adgdalarmManagement_dataChangeHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
}
public function ddlEventType_creationCompleteHandler(event:FlexEvent, data:Object):void
{
for (var count:int=0; count < alarms.length; count++)
{
for (var count1:int=0; count1 < events.length; count1++)
{
if (events.getItemAt(count1).eventName == alarms.getItemAt(count).eventName)
{
event.currentTarget.selectedIndex=count1;
break;
}
}
}
checkEventTypeVisible(event, data);
}
public function checkEventTypeVisible(event:FlexEvent, data:Object):void
{
if (data == '-')
{
event.currentTarget.visible=true;
}
else
{
event.currentTarget.visible=false;
}
}
public function button1_clickHandler(event:MouseEvent):void
{
if (event.currentTarget.label == '-')
{
event.currentTarget.parent.parent.parent.parent.dataProvider.removeItemAt(event.currentTarget.parent.parent.parent.parent.selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.refresh();
adgdalarmManagement.validateNow();
}
else
{
var selectedIndex:int=event.currentTarget.parent.parent.parent.parent.selectedIndex;
alarmRow=new alarmVO();
alarmRow.buttonLabel='-';
alarmRow.eventName="";
alarmRow.channel=new ChannelVO();
event.currentTarget.parent.parent.parent.parent.dataProvider.removeItemAt(event.currentTarget.parent.parent.parent.parent.selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.addItemAt(alarmRow, selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.addItemAt(populateFieldforButton(), selectedIndex + 1);
}
}
public function ddlChannel_changeHandler(event:IndexChangeEvent):void
{
event.target.parent.data.typeDisplay=event.target.selectedItem.name;
event.target.parent.data.messageTypeDisplay=event.target.selectedItem.messageType;
}
public function ddlChannel_creationCompleteHandler(event:FlexEvent, data:Object):void
{
// TODO Auto-generated method stub
if (channels != null)
{
if (alarms != null)
for (var count:int=0; count < alarms.length; count++)
{
for (var count1:int=0; count1 < channels.length; count1++)
{
if (alarms.getItemAt(count).channel != null)
{
if (channels.getItemAt(count1).name == alarms.getItemAt(count).channel.name)
{
event.currentTarget.selectedIndex=count1;
break;
}
}
else
{
event.currentTarget.selectedIndex=0;
}
}
}
}
else
{
event.currentTarget.selectedIndex=0;
}
checkVisible(event, data);
}
public function checkVisible(event:FlexEvent, data:Object):void
{
if (data == '-')
{
event.currentTarget.visible=true;
}
else
{
event.currentTarget.visible=false;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
width="100%"
height="100%"
id="vbxChannelManagement">
<!-- Added for Rounding off Corners of GRID-->
<mx:ApplicationControlBar width="100%"
cornerRadius="8"
height="100%">
<mx:AdvancedDataGrid id="adgdalarmManagement"
width="100%"
height="100%"
dataProvider="{alarms}"
dataChange="adgdalarmManagement_dataChangeHandler(event)"
creationComplete="adgdalarmManagement_creationCompleteHandler(event)">
<mx:columns>
<mx:AdvancedDataGridColumn id="adgcAdRemove"
width="30"
dataField="buttonLabel">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<s:Button label="{data.buttonLabel}"
width="30"
click="outerDocument.button1_clickHandler(event)"/>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcEvent"
dataField="buttonLabel"
headerText="Event">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<s:HGroup id="eventGroup"
visible="{(this.parent.data.buttonLabel=='-')?true:false}}">
<s:DropDownList id="ddlEventType"
dataProvider="{outerDocument.events}"
creationComplete="outerDocument.ddlEventType_creationCompleteHandler(event,data.buttonLabel)"
labelField="eventName"/>
</s:HGroup>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcChannel"
dataField="buttonLabel"
headerText="Channel">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<!--<s:HGroup width="100%"
id="channelField"
>-->
<s:DropDownList id="ddlChannel"
width="100%"
dataProvider="{outerDocument.channels}"
creationComplete="outerDocument.ddlChannel_creationCompleteHandler(event,data.buttonLabel)"
labelField="id"
change="outerDocument.ddlChannel_changeHandler(event)"
/>
<!--</s:HGroup>-->
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcChannelType"
headerText="Type"
dataField="typeDisplay"/>
<mx:AdvancedDataGridColumn id="adgcMessageType"
headerText="Message Type"
dataField="messageTypeDisplay"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:ApplicationControlBar>
</s:VGroup>
</s:Group>
I have and add button (last row) in one column of the AdvancedDataGrid.
for the row having the add button the rest of fields are not visible.
On click of the add button a new row is added to the grid for the user to add.
After that this button becomes delete button (label becomes '-' and a new row is added at the bottom for adding another row).
When i click on the delete button (label '-'), the last row gets the add button('+' label) but the fields of the row become visible.
Can somebody please explain
Below is the sample code
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400"
height="300"
initialize="group1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.AdvancedDataGridEvent;
import mx.events.CollectionEvent;
import mx.events.DataGridEvent;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
import spark.events.IndexChangeEvent;
protected function group1_initializeHandler(event:FlexEvent):void
{
alarms=new ArrayCollection();
alarms.addItem(initalarmRow());
//alarms.addEventListener(CollectionEvent.COLLECTION_CHANGE, populateFieldDetails);
alarms.addItem(populateFieldforButton());
populateEvents();
}
private var _addButton:Boolean
[Bindable]
public function get addButton():Boolean
{
return _addButton;
}
public function set addButton(value:Boolean):void
{
_addButton=value;
}
private var _alarms:ArrayCollection;
[Bindable]
public function get alarms():ArrayCollection
{
return _alarms;
}
public function set alarms(value:ArrayCollection):void
{
_alarms=value;
}
private var _alarmRow:alarmVO;
[Bindable]
public function get alarmRow():alarmVO
{
return _alarmRow;
}
public function set alarmRow(value:alarmVO):void
{
_alarmRow=value;
}
// Initiliaze an alarmVO for a new row
private function initalarmRow():alarmVO
{
alarmRow=new alarmVO();
alarmRow.buttonLabel='-';
channels=new ArrayCollection;
for (var i:int=0; i < 10; i++)
{
var vo:ChannelVO=new ChannelVO();
vo.id=i;
vo.name="channel_" + i;
vo.messageType="Message_" + i;
channels.addItem(vo);
}
alarmRow.eventName="Event_1";
alarmRow.channel=channels.getItemAt(5) as ChannelVO;
return alarmRow;
}
private var _events:ArrayCollection;
[Bindable]
public function get events():ArrayCollection
{
return _events;
}
public function set events(value:ArrayCollection):void
{
_events=value;
}
private var _channels:ArrayCollection;
[Bindable]
public function get channels():ArrayCollection
{
return _channels;
}
public function set channels(value:ArrayCollection):void
{
_channels=value;
}
public function populateFieldforButton():alarmVO
{
alarmRow=new alarmVO();
alarmRow.buttonLabel="+";
return alarmRow;
}
public function populateEvents():void
{
events=new ArrayCollection();
for (var i:int=0; i < 3; i++)
{
var event:EventVO=new EventVO();
event.id=i;
event.eventName="Event_" + i;
events.addItem(event);
}
}
public function populateFieldDetails(event:Event):void
{
for (var count:int; count < alarms.length; count++)
{
//trace('alarms.getItemAt(count).buttonLabel :' + alarms.getItemAt(count).buttonLabel);
if (alarms.getItemAt(count).buttonLabel == '+')
{
alarms.getItemAt(count).channel=null;
alarms.getItemAt(count).eventName=null;
}
adgdalarmManagement.invalidateDisplayList();
}
}
public function preventEditing(event:AdvancedDataGridEvent):void
{
//check if it is the last row(it should not be editable)
if (event.rowIndex == alarms.length - 1)
{
event.preventDefault();
//trace('**** :' + event.currentTarget);
}
}
public function adgdalarmManagement_creationCompleteHandler(event:FlexEvent):void
{
}
protected function adgdalarmManagement_dataChangeHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
}
public function ddlEventType_creationCompleteHandler(event:FlexEvent, data:Object):void
{
for (var count:int=0; count < alarms.length; count++)
{
for (var count1:int=0; count1 < events.length; count1++)
{
if (events.getItemAt(count1).eventName == alarms.getItemAt(count).eventName)
{
event.currentTarget.selectedIndex=count1;
break;
}
}
}
checkEventTypeVisible(event, data);
}
public function checkEventTypeVisible(event:FlexEvent, data:Object):void
{
if (data == '-')
{
event.currentTarget.visible=true;
}
else
{
event.currentTarget.visible=false;
}
}
public function button1_clickHandler(event:MouseEvent):void
{
if (event.currentTarget.label == '-')
{
event.currentTarget.parent.parent.parent.parent.dataProvider.removeItemAt(event.currentTarget.parent.parent.parent.parent.selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.refresh();
adgdalarmManagement.validateNow();
}
else
{
var selectedIndex:int=event.currentTarget.parent.parent.parent.parent.selectedIndex;
alarmRow=new alarmVO();
alarmRow.buttonLabel='-';
alarmRow.eventName="";
alarmRow.channel=new ChannelVO();
event.currentTarget.parent.parent.parent.parent.dataProvider.removeItemAt(event.currentTarget.parent.parent.parent.parent.selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.addItemAt(alarmRow, selectedIndex);
event.currentTarget.parent.parent.parent.parent.dataProvider.addItemAt(populateFieldforButton(), selectedIndex + 1);
}
}
public function ddlChannel_changeHandler(event:IndexChangeEvent):void
{
event.target.parent.data.typeDisplay=event.target.selectedItem.name;
event.target.parent.data.messageTypeDisplay=event.target.selectedItem.messageType;
}
public function ddlChannel_creationCompleteHandler(event:FlexEvent, data:Object):void
{
// TODO Auto-generated method stub
if (channels != null)
{
if (alarms != null)
for (var count:int=0; count < alarms.length; count++)
{
for (var count1:int=0; count1 < channels.length; count1++)
{
if (alarms.getItemAt(count).channel != null)
{
if (channels.getItemAt(count1).name == alarms.getItemAt(count).channel.name)
{
event.currentTarget.selectedIndex=count1;
break;
}
}
else
{
event.currentTarget.selectedIndex=0;
}
}
}
}
else
{
event.currentTarget.selectedIndex=0;
}
checkVisible(event, data);
}
public function checkVisible(event:FlexEvent, data:Object):void
{
if (data == '-')
{
event.currentTarget.visible=true;
}
else
{
event.currentTarget.visible=false;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
width="100%"
height="100%"
id="vbxChannelManagement">
<!-- Added for Rounding off Corners of GRID-->
<mx:ApplicationControlBar width="100%"
cornerRadius="8"
height="100%">
<mx:AdvancedDataGrid id="adgdalarmManagement"
width="100%"
height="100%"
dataProvider="{alarms}"
dataChange="adgdalarmManagement_dataChangeHandler(event)"
creationComplete="adgdalarmManagement_creationCompleteHandler(event)">
<mx:columns>
<mx:AdvancedDataGridColumn id="adgcAdRemove"
width="30"
dataField="buttonLabel">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<s:Button label="{data.buttonLabel}"
width="30"
click="outerDocument.button1_clickHandler(event)"/>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcEvent"
dataField="buttonLabel"
headerText="Event">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<s:HGroup id="eventGroup"
visible="{(this.parent.data.buttonLabel=='-')?true:false}}">
<s:DropDownList id="ddlEventType"
dataProvider="{outerDocument.events}"
creationComplete="outerDocument.ddlEventType_creationCompleteHandler(event,data.buttonLabel)"
labelField="eventName"/>
</s:HGroup>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcChannel"
dataField="buttonLabel"
headerText="Channel">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<!--<s:HGroup width="100%"
id="channelField"
>-->
<s:DropDownList id="ddlChannel"
width="100%"
dataProvider="{outerDocument.channels}"
creationComplete="outerDocument.ddlChannel_creationCompleteHandler(event,data.buttonLabel)"
labelField="id"
change="outerDocument.ddlChannel_changeHandler(event)"
/>
<!--</s:HGroup>-->
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="adgcChannelType"
headerText="Type"
dataField="typeDisplay"/>
<mx:AdvancedDataGridColumn id="adgcMessageType"
headerText="Message Type"
dataField="messageTypeDisplay"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:ApplicationControlBar>
</s:VGroup>
</s:Group>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我通过重写 commitproperties 函数并在该函数中检查下拉列表的可见性来使其工作。
类似的东西
I got it working by overriding commitproperties function and in that function checking the viisbility of the dropdown.
something like