apache-flex - Spark DropDownList 作为 AdvancedDataGrid 中的 itemEditor 的问题

Question

我正在尝试将 Spark DropDownList 用作 AdvancedDataGrid 中的 itemEditor。然而，我偶然发现了两个问题:

1. 单击 DropDownList 中的项目会更改 ADG 中的选定行。您可以通过编译下面的代码并执行以下步骤来查看此行为。

   • 点击第 1 行中的“A”打开 DropDownList
   • 用鼠标选择“C”

   值从“A”变为“C”，第 3 行是 ADG 中的选定行。看起来 DropDownList 中的鼠标单击也由 ADG 本身处理，它会相应地更改所选行。我想不出防止这种情况发生的方法。预期的行为是在关闭 DropDownList 后仍选择第 1 行。

2. 单击 DropDownList 的滚动条可关闭 DropDownList。 (我刚刚在写这篇文章的相关问题中找到了解决这个问题的方法:Scrollbars in dropdownlist inside DataGrid itemEditor not working)

申请

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>

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

            [Bindable]
            private var myDataProvider:ArrayCollection = new ArrayCollection([
                {label: "Row 1", value: "A"},
                {label: "Row 2", value: "B"},
                {label: "Row 3", value: "C"},
                {label: "Row 4", value: "D"},
                ]);
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid dataProvider="{myDataProvider}" editable="true">
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Label" dataField="label" width="150"/>
            <mx:AdvancedDataGridColumn headerText="Value" dataField="value" width="200" editorDataField="selectedItem"
                                       itemEditor="DropDownListEditor"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Application>

元素编辑器

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer 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"
                                  implements="mx.managers.IFocusManagerComponent">

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

            [Bindable]
            public var values:IList = new ArrayList(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
                "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]);

            public function get selectedItem():*
            {
                return dropDownList.selectedItem;
            }

            public override function setFocus():void
            {
                dropDownList.setFocus();
            }
        ]]>
    </fx:Script>

    <s:DropDownList id="dropDownList" top="2" left="2" right="2" bottom="2" dataProvider="{values}"
                    selectedItem="{listData.label}" open="dropDownList.skin['dropDown'].owner = this"/>
</s:MXAdvancedDataGridItemRenderer>

Answer 1

我也看到了这个问题。我的解决方法是将 DropDownEvent.CLOSE 的事件监听器添加到 AdvancedDataGrid 的子类(您必须确保您的编辑器正确调度此事件)。

一旦你有了它，你就可以阻止 ADG mouseUpHandler 触发，并自己处理 endEdit 调用。