更改itemRemderer的可见性

时间:2012-01-02 09:02:55

标签: flex itemrenderer advanceddatagrid itemrenderers

我在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>

1 个答案:

答案 0 :(得分:0)

我通过覆盖commitproperties函数并在该函数中检查下拉列表的可用性来实现它。

之类的东西
override public function commitproperties():void{
    super.commitporperties();
    if(data.buttonLabel == '-')
        this.visible = false;
}