在 Flex 4 中使用 ComboBox 作为 ItemEditor答案

【问题标题】：Using a ComboBox as ItemEditor in Flex 4在 Flex 4 中使用 ComboBox 作为 ItemEditor
【发布时间】：2012-05-08 03:57:34
【问题描述】：

我有一个带有数据的简单 DataGrid。在其中一列中，我想使用 ComboBox 来编辑字段，而不是标准的编辑框。

我该怎么做？我已经尝试了我在互联网上找到的所有类型的东西，但它们都无法简单地更新值。我会说这样做应该不会太难。

【问题讨论】：

显示一些代码，以便我们找出您的错误所在。我在没有问题之前已经这样做了。

标签： apache-flex datagrid itemeditor

【解决方案1】：

我自己实际上正在这样做，并且使用 spark:DataGrid 它实际上比 halo 更容易一些 - 但两者都遵循相同的设置/架构。

开始于：

spark.components.gridClasses.ComboBoxGridItemEditor;

根据您的数据设置的性质和/或这种编辑对您的应用程序的多产程度，您可以像大多数文档在中建议的那样内联编写它，或者只是将其子类化（尽管在幕后，这些是同一件事——后者更容易重用）。在我的场景中组合的数据是一个更大的父对象的子选择，所以我选择让自己更容易并添加一个额外的属性 dataField 来模仿其他渲染器/编辑器 - 实际上仅显示在单元格本身中（不处于编辑模式时）。

基本设置看起来或多或少是这样的（至少我的是这样）：

public class AccountComboEditor extends ComboBoxGridItemEditor
{
     private _dataField:String;

     public function AccountComboEditor()
     {
         super();
         //note - typically you wouldn't do "logic" in the view but it's simplified as an example
         addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
     }

     public function get dataField():String { return _dataField; }

     public function set dataField(value:String):void
     {
         if (_dataField !=value) //dosomeadditionalvalidation();
         _dataField = value;
     }


     override public function prepare():void
     {
        super.prepare();

        if (data && dataField && comboBox) comboBox.labelField = data[dataField];
     }

     protected function onCreationComplete(event:FlexEvent):void
     {
         //now setup the dataProvider to your combo box - 
         //as a simple example mine comse out of a model

         dataProvider = model.getCollection();
         //this isn't done yet though - now you need a listener on the combo to know
         //what item was selected, and then get that data_item (label) back onto this 
         //editor so it has something to show when the combo itself isn't in
         //editor mode
     }
}

所以真正的收获是设置组合框的 labelField，可以在子类内部设置，也可以在外部设置（如果您需要将其作为附加属性公开）。

下一部分是将其用作实际数据网格的 mx.core.ClassFactory 的一部分。一个简单的视图看起来类似：

<s:DataGrid>
   <fx:Script>
        private function getMyEditor(dataField:String):ClassFactory
        {
           var cf:ClassFactory = new ClassFactory(AccountComboEditor);
               cf.properties = {dataField : dataField };
           return cf;
        }
   </fx:Script>

   <s:columns>
      <mx:ArrayList>
         <s:GridColumn itemEditor="{getMyEditor('some_data_property')}" />
      </mx:ArrayList>
   </s:columns>
</s:DataGrid>

此Creating item renderers... 文档将为您提供更多信息。

【讨论】：

【解决方案2】：

我想通了。我只想要一个简单的下拉框，而不是文本编辑字段。

下面的代码确实想要我想要的：

        <mx:DataGridColumn dataField="type" headerText="Type" editorDataField="value">
            <mx:itemEditor>
                <fx:Component>
                    <mx:ComboBox>
                        <mx:dataProvider>
                            <fx:String>Gauge</fx:String>
                            <fx:String>Graph</fx:String>
                            <fx:String>Indicator</fx:String>
                        </mx:dataProvider>
                    </mx:ComboBox>
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>

【讨论】：