如何为DropDownList设置选定的项目在Adobe Flex中的DataGrid中？

Question

我有DropDownList呈现在DataGrid上。我的Datagrid由两列组成，第一列包含项目名称，第二列包含DropDownList（带有分配给该项目的标签）。

我可以加载从数据库中获取标签值并将它们加载到DropDownList。

因此每一行都包含项目名称和DropDownList，并将标签数据加载到该项目中。

现在我想要的是，我希望每个下拉菜单都显示与该特定项目关联的标签。

我的Flex代码：

<mx:DataGrid id="IdDgItemLabelDisp" left="10" right="10" top="39" bottom="10" dataProvider="{arrAllItem}"> 
<mx:columns> 
    <mx:DataGridColumn dataField="itemName" headerText="Item Name"/> 
    <mx:DataGridColumn headerStyleName="dataGridHeadingStyle" headerText="Label"> 
     <mx:itemRenderer> 
      <fx:Component> 
       <mx:HBox horizontalAlign="center"> 
        <fx:Script> 
         <![CDATA[ 
         ]]> 
        </fx:Script> 
        <s:DropDownList id="IdCmbItemLabel" dataProvider="{outerDocument.arrLabelCombo}" selectedItem="{outerDocument.arrLabelCombo.getItemAt(0)}">                
        </s:DropDownList> 
       </mx:HBox> 
      </fx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 
</mx:columns> 

Answer 1

如果你想在dropdown按照它在arrAllItem定义的行数据的selectedItem，那么这里是解决方案：

<?xml version="1.0"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"> 
<fx:Script><![CDATA[ 
    import mx.collections.ArrayCollection; 
    [Bindable] 
    private var arrAllItem:ArrayCollection = new ArrayCollection([ 
     {itemName: "Laptop", quantity:1}, 
     {itemName: "Windows", quantity:2}, 
     {itemName: "Mac", quantity:3}, 
     {itemName: "Tablet", quantity:4} 
    ]); 
    [Bindable] 
    public var arrLabelCombo:ArrayCollection = new ArrayCollection([ 
     {label: "One", data: 1}, 
     {label: "Two", data: 2}, 
     {label: "Three", data: 3}, 
     {label: "Four", data: 4} 
    ]); 
    ]]></fx:Script> 
<mx:DataGrid id="IdDgItemLabelDisp" left="10" right="10" top="39" bottom="10" dataProvider="{arrAllItem}"> 
    <mx:columns> 
     <mx:DataGridColumn dataField="itemName" headerText="Item Name"/> 
     <mx:DataGridColumn headerStyleName="dataGridHeadingStyle" headerText="Label"> 
      <mx:itemRenderer> 
       <fx:Component> 
        <mx:HBox horizontalAlign="center"> 
         <fx:Script> 
         <![CDATA[ 
          override public function set data(value:Object):void 
          { 
           if(data != value) 
           { 
            super.data = value; 
           } 
          } 
          private function getSelectedItem(data:Object):Object 
          { 
           if (data) 
           { 
            for each(var item:Object in IdCmbItemLabel.dataProvider) 
            { 
             if(data.quantity == item.data) 
              return item; 
            } 
           } 
           return null; 
          } 
          ]]> 
         </fx:Script> 
         <s:DropDownList id="IdCmbItemLabel" dataProvider="{outerDocument.arrLabelCombo}" selectedItem="{getSelectedItem(data)}"> 
         </s:DropDownList> 
        </mx:HBox> 
       </fx:Component> 
      </mx:itemRenderer> 
     </mx:DataGridColumn> 
    </mx:columns> 
</mx:DataGrid> 
</s:Application>