Spark DropDownList 作为 AdvancedDataGrid 中的 itemEditor 的问题答案

【问题标题】：Issues with Spark DropDownList as itemEditor within AdvancedDataGridSpark DropDownList 作为 AdvancedDataGrid 中的 itemEditor 的问题
【发布时间】：2011-03-11 14:53:51
【问题描述】：

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

单击 DropDownList 中的项目会更改 ADG 中的选定行。您可以通过编译下面的代码并执行以下步骤来查看此行为。
- 通过单击第 1 行中的“A”打开 DropDownList
- 用鼠标选择“C”
值从“A”变为“C”，第 3 行是 ADG 中的选定行。看起来 DropDownList 中的鼠标单击也由 ADG 本身处理，它相应地更改所选行。我想不出办法来阻止这种情况。预期的行为是在 DropDownList 关闭后仍然选择第 1 行。
单击 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>

【问题讨论】：

标签： apache-flex flex4 advanceddatagrid

【解决方案1】：

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

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

【讨论】：

感谢您的提示！我不想更改 ADG，所以我又查看了所有触发的事件。既然您提到了 ADG 的 mouseUpHandler，那是寻找解决方案的一个很好的起点（请参阅我自己的答案）。

【解决方案2】：

感谢 ed，我现在找到了一个似乎工作得很好的解决方案。 DropDownList 使用MOUSE_DOWN 事件来关闭dropDown。因此，当MOUSE_UP 事件被触发时，dropDown 不再存在。这就是 ADG 收到 MOUSE_UP 事件并更改所选行的原因。

我现在使用自定义 DropDownList 来抑制 dropDown 关闭后的第一个 MOUSE_UP 事件。到目前为止，这没有问题。

protected override function dropDownController_closeHandler(event:DropDownEvent):void
{
    systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
    super.dropDownController_closeHandler(event);
}

protected function systemManager_mouseUpHandler(event:MouseEvent):void
{
    systemManager.getSandboxRoot().removeEventListener(MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
    event.stopImmediatePropagation();
}

【讨论】：