Question

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

单击DropDownList中的项目会更改ADG中的选定行。您可以通过编译下面的代码并执行以下步骤来查看此行为。
- 点击第1行中的“A”
- 用鼠标选择“C”
值从“A”变为“C”，行3是ADG中的选定行。看起来DropDownList中的鼠标单击也由ADG本身处理，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>

的itemEditor

<?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调用。

Answer 2

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

我现在正在使用自定义DropDownList，我会在MOUSE_UP关闭后禁止发生第一个dropDown事件。到目前为止，这没有问题。

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();
}

Spark DropDownList作为AdvancedDataGrid中的itemEditor的问题

2 个答案: