MX AdvancedDataGrid中的Flex Spark ComboBox

Question

我想使用组合框作为AdvancedDataGrid列之一的itemEditor。 我环顾四周，决定使用Spark ComboBox组件-它们很光滑，并且似乎本机支持许多简洁的东西，包括在textInput中键入时自动完成字符串。 经过一番修补后，我设法在我的ADG中添加了一个火花ComboBox，设置了它的数据提供程序，以便在用户添加新项目时扩展它，并将其连接起来。 结果似乎很有希望，但与往常一样，我无法克服一些细节（实际上我还不是Flex Pro），并希望有人可以指出正确的方向。 该代码粘贴在下面，并使用此处介绍的技巧将spark组件用作mx网格的itemEditor。

如果您使用（超级简单）应用程序，您会注意到，如果您单击（几次）右侧最后一列并打开ComboBox，则可以从列表中选择一个值，单击另一个单元格，然后所选值将出现在您刚离开的单元格中。 但是，这里开始列出烦人的事情：

1. 如果您开始在ComboBox中输入内容，并在出现所需项目时按Enter键，则ComboBox将保持空白
2. 如果您在ComboBox中键入新项目并按Enter，则该项目将被添加到数据提供程序中（正确的行为），但ComboBox仍然为空
3. 当您第一次单击一个单元格时，其当前值也会消失

我调试了前两个烦人的场景，似乎按Enter导致在myCB_changeHandler之前调用advanceddatagrid1_itemEditEndHandler，这意味着当dataGrid在其单元格上进行更新时，永远不会设置myRetVal。 如果从列表中进行选择，则会发生相反的情况，即可行的情况。 虽然不知道该怎么办:-(

也会喜欢第三种烦人症状的建议。

谢谢！

F

---

MXML应用

<fx:Declarations>
    <s:ArrayCollection id="myCbDb"/>

</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.AdvancedDataGridEvent;
        import mx.events.DataGridEventReason;
        import mx.events.FlexEvent;

        [Bindable]
        public var dataProv:ArrayCollection = new ArrayCollection();


        [Bindable]
        private var dpADG:ArrayCollection = new ArrayCollection([
            {Name:'Pavement', duration:10, complete:0.1, ownerResource:'jon'},
            {Name:'Pavement', duration:20, complete:.2, ownerResource:'randy'},
            {Name:'Saner', duration:30, complete:.30, ownerResource:'joe'},
            {Name:'Saner', duration:10, complete:.40, ownerResource:'mia'},
            {Name:'The Doors', duration:5, complete:.50, ownerResource:'mia'},
            {Name:'The Doors', duration:0, complete:.60, ownerResource:'jill'},
            {Name:'Grateful Dead', duration:20, complete:.70, ownerResource:'jill'},
            {Name:'Grateful Dead', duration:10, complete:.80, ownerResource:'joe'},
            {Name:'Grateful Dead', duration:10, complete:.90, ownerResource:'jon'},
            {Name:'The Doors', duration:5, complete:1, ownerResource:'jon'},
            {Name:'The Doors', duration:10, complete:0, ownerResource:'jon'}
        ]);                   

        private function formatDuration(data:Object, column:AdvancedDataGridColumn):String
        {
            var retVal:String = "";
            var duration:Number = data[column.dataField] as Number;
            retVal = duration.toString() + " days";
            return retVal;
        }

        private function formatComplete(data:Object, column:AdvancedDataGridColumn):String
        {
            var retVal:String = "";
            var duration:Number = data[column.dataField] as Number;
            duration *= 100;
            retVal = duration.toString() + " %";
            return retVal;
        }

        private function formatResources(data:Object, column:AdvancedDataGridColumn):String
        {
            var retVal:String = data[column.dataField] as String;
            return retVal;
        }



        protected function advanceddatagrid1_creationCompleteHandler(event:FlexEvent):void
        {
            for each (var a:Object in dpADG.source)
            {
                var s:String = a["ownerResource"];
                if (!dataProv.contains(s))
                {
                    dataProv.addItem(s);
                    trace("adding element ", s);
                }
            }
        }


        protected function advanceddatagrid1_itemEditEndHandler(event:AdvancedDataGridEvent):void
        {
            if (event.dataField == "ownerResource")
            {
                var editor:ResourceComboBoxField = ADG.itemEditorInstance as ResourceComboBoxField;
                var name:String = editor.myRetVal; 
                // handle the ESC case first off
                if (event.reason == DataGridEventReason.CANCELLED)
                {
                    // Do not update cell.
                    return;
                }

                // do something with myRetVal if needed be          
            }
        }

    ]]>
</fx:Script>

<mx:AdvancedDataGrid 
    width="100%" height="100%"
    id="ADG"
    sortExpertMode="true"
    editable="true"
    creationComplete="advanceddatagrid1_creationCompleteHandler(event)"
    dataProvider="{dpADG}"
    itemEditEnd="advanceddatagrid1_itemEditEndHandler(event)">
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="Name" />
        <mx:AdvancedDataGridColumn dataField="duration" labelFunction="formatDuration" itemEditor="DurationField" editorDataField="value"/>
        <mx:AdvancedDataGridColumn dataField="complete" labelFunction="formatComplete" itemEditor="CompleteField" editorDataField="value"/>
        <mx:AdvancedDataGridColumn dataField="ownerResource" labelFunction="formatResources" editorDataField="myRetVal">
            <mx:itemEditor>
                <fx:Component>
                    <local:ResourceComboBoxField myDP="{outerDocument.dataProv}">

                    </local:ResourceComboBoxField>
                </fx:Component>
            </mx:itemEditor>
        </mx:AdvancedDataGridColumn>

    </mx:columns>
</mx:AdvancedDataGrid>        

和组件

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.IList;

        import spark.events.IndexChangeEvent;

        public var myRetVal:String = new String();

        [Bindable]
        public var myDP:ArrayCollection;

        // Event handler to determine if the selected item is new.
        protected function myCB_changeHandler(event:IndexChangeEvent):void
        {
            // Determine if the index specifies a new data item.
            if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
                // Add the new item to the data provider.
                myDP.addItem(myCB.selectedItem);

            myRetVal = myCB.selectedItem;
        }

    ]]>
</fx:Script>

<s:ComboBox id="myCB" width="140" change="myCB_changeHandler(event);" dataProvider="{myDP}"/>

Answer 1

因此，亲爱的Fred，我读了您的文章，并获得了一些有关绑定的想法，例如：

<mx:Binding destination="value" source="cbo.value"/>

在组件内部。

我在这里也向凯尔解释他的愿景。 而且我认为，将其转换为Spark组件没有问题。

如果有帮助，请告诉我。

谢谢。

Answer 2

好了，经过很多苦难，我发现：

• 覆盖方法集数据似乎可以解决问题3-在阅读了更多的标准Adobe Flex文献（BTW很棒）之后，这很有道理。 这样的事情应该可以解决问题

    override public function set data(value:Object):void { myCB.selectedItem = value.ownerResource; myCB.validateNow(); } 

• 如果您输入名称然后按Enter，则CB的标准行为似乎是返回到旧值（即，按ESC通常会发生的情况）。 不确定如何更改该行为，但是

• 问题1和2是由于未设置原始值，因此默认为填充有空值的预览值。