Flex Datagrid中的动态Spark DropDownList ItemRenderer

时间:2010-10-29 03:29:52

标签: flex drop-down-menu datagrid itemrenderer

我有一个datagrid,其中包含需要获取动态数据的Spark下拉列表。 datagrid使用单独的dataProvider。

当我在ItemRenderer中使用静态ArrayCollection时,它可以工作(请参阅清单1)。

但是,当我使用Swiz调解'list complete'事件来加载ArrayCollection时,下拉列表不会显示新数据(请参阅清单2)。

使用调试器,我检查了下拉列表ItemRenderer,并确认新数据正被加载到ArrayCollection中。新数据未显示在UI控件中。我已经尝试了invalidateProperties()+ validateNow()并在控件和渲染器(this)上调度事件,但似乎没有任何东西使新数据出现在数据网格的控件中。

请帮助!!!

清单1:Datagrid和静态ArrayCollection(这可行):

<mx:DataGrid x="10" y="25" width="98%" id="dgInventory" paddingLeft="25" paddingRight="25" paddingTop="25" paddingBottom="25" 
                     editable="true"
                     itemClick="dgInventory_itemClickHandler(event)" dataProvider="{acInventory}"
                     creationComplete="dgInventory_creationCompleteHandler(event)"
                     height="580">
            <mx:columns>
                <mx:DataGridColumn headerText="Item" dataField="itemName" itemRenderer="components.ItemRendererItem"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
                <mx:DataGridColumn headerText="Quantity Required" dataField="quantityReq" itemRenderer="components.ItemRendererQuantityRequired"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
            </mx:columns>
</mx:DataGrid>

<fx:Script>
    <![CDATA[       

        import mx.collections.ArrayCollection;
        import spark.events.IndexChangeEvent;

        public var selection:int;

        [Bindable]
        protected var acItem:ArrayCollection = new ArrayCollection(
            [   { itemName: "Item1"},
                { itemName: "Item2"},
                { itemName: "Item3"},
            ]);
    //
        protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
        {
            selection = e.newIndex;
        }

    ]]>
</fx:Script>

<s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                selectedIndex="{int(dataGridListData.label)}"
                change="dropdownlist1_changeHandler(event)"
                width="80%" top="5" bottom="5" left="5" right="5"/>

清单2:Dynamic ArrayCollection(不起作用):

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true">

    <fx:Script>
        <![CDATA[       
            import event.ItemEvent;

            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            import spark.events.IndexChangeEvent;

            public var selection:int;
        //
            [Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
        //
            protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
            {
                selection = e.newIndex;
            }
        //
            protected function ddlItem_creationCompleteHandler(event:FlexEvent):void
            {
                var eve : ItemEvent = new ItemEvent( ItemEvent.LIST_ITEM_REQUESTED );
                dispatchEvent( eve );
            }
        //
            [Mediate( event="ItemEvent.LIST_ITEM_COMPLETE", properties="acItem" )]
            public function refreshness( _acItem : ArrayCollection ):void
            {
                acItem.removeAll();

                var len:int = _acItem.length;

                if (len > 0)
                {
                    for (var i:int=0; i < len; i++)
                    {
                        var newItem:Object = new Object;
                        newItem["itemName"] = _acItem[i].itemName;
                        acItem.addItem(newItem);
                    }
                }
                this.invalidateProperties();
                this.validateNow();
                //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            }

        ]]>
    </fx:Script>

    <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                    selectedIndex="{int(dataGridListData.label)}"
                    creationComplete="ddlItem_creationCompleteHandler(event)"
                    change="dropdownlist1_changeHandler(event)"
                    width="80%" top="5" bottom="5" left="5" right="5"/>
</s:MXDataGridItemRenderer>

1 个答案:

答案 0 :(得分:2)

重新阅读Peter Ent的ItemRenderer系列后,结果非常简单。

我将DataGrid扩展为具有我需要的ArrayCollection属性,然后将其添加到我的渲染器中:

[Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
        //
            override public function set data( value:Object ) : void
            {
                super.data = value;
                acItem = (listData.owner as MyDataGrid).itemList; // get the data from the renderer's container (by extending it to add a property, if necessary)
            }