Flex Datagrid 中的动态 Spark DropDownList ItemRenderer

Question

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

当我在 ItemRenderer 中使用静态 ArrayCollection 时，它可以工作（请参见清单 1）。

但是，当我使用 Swiz 调解“列表完成”事件以加载 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：动态 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>

Answer 1

在重读了 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)
            }