apache-flex - 在 Flex 4 列表中处理鼠标单击以查找所选项目(因为 itemClick 消失了)

Question

我已经为我的问题准备了一个简化的测试用例。如果您将以下 2 个文件放入项目中，它将立即在您的 Flash Builder 中运行。

我试图在弹出窗口中显示一个字符串列表和一个确认复选框:

在实际应用程序中，我使用列表中选定的字符串发送自定义事件，但在下面的测试代码中，我只调用 trace(str);

我的问题:如果我使用click 事件，那么窗口会关闭，即使我点击滚动条(!str 检查下面没有帮助，当一个项目在以前的使用中被选中时)。如果我使用 change 事件，那么当我点击与上次相同的项目时，窗口不会关闭。 itemClick 事件似乎不存在于 spark.components.List 中不再。

请就如何处理这个可能经常出现的问题有什么建议吗？

编写自定义项渲染器并为每个项设置一个click 事件处理程序对于这种情况似乎有些过分，因为列表中有字符串。

Test.mxml:(请点击 myBtn 几次 - 以查看我的问题，点击并更改)

<?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="400" minHeight="300">

    <fx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private var _popup:Popup = new Popup();

            private function showPopup(event:MouseEvent):void {
                PopUpManager.addPopUp(_popup, this, true);
                PopUpManager.centerPopUp(_popup);
            }
        ]]>
    </fx:Script>

    <s:Button id="myBtn" right="5" bottom="5" 
        label="Open window" click="showPopup(event)" />

</s:Application>

弹出窗口.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="240" height="240"
    creationComplete="init(event)"
    close="close()">    

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.events.CloseEvent;
            import mx.events.ItemClickEvent;
            import mx.managers.PopUpManager;

            private var myData:ArrayList = new ArrayList();

            private function init(event:FlexEvent):void {
                // XXX in the real app data is updated from server
                myData.removeAll();
                for (var i:uint = 1; i <= 10; i++)
                    myData.addItem('Item #' + i);
            }

            public function close(event:TimerEvent=null):void {
                PopUpManager.removePopUp(this);
            }

            private function handleClick(event:MouseEvent):void {
                var str:String = myList.selectedItem as String;
                if (!str)
                    return;

                if (myBox.selected) {
                    Alert.show(
                        'Select ' + str + '?', 
                        null, 
                        mx.controls.Alert.YES | mx.controls.Alert.NO,
                        null,
                        handleConfirm,
                        null,
                        mx.controls.Alert.NO
                    );
                } else {
                    sendEvent();
                }
            }

            private function handleConfirm(event:CloseEvent):void {
                if (event.detail == mx.controls.Alert.YES)
                    sendEvent();
            }

            private function sendEvent():void {
                close();
                // XXX in the real app dispatchEvent() is called
                trace('selected: ' + (myList.selectedItem as String));
            }
        ]]>
    </fx:Script>

    <s:VGroup paddingLeft="20" paddingTop="20" 
            paddingRight="20" paddingBottom="20" gap="20" 
            width="100%" height="100%">
        <s:List id="myList" dataProvider="{myData}" 
            click="handleClick(event)"
            width="100%" height="100%" fontSize="24" />
        <s:CheckBox id="myBox" label="Confirm" />
    </s:VGroup>
</s:TitleWindow>

我也想知道，为什么我会收到上面的警告:

Data binding will not be able to detect assignments to "myData".

Answer 1

Spark List 发送一个 'IndexChangeEvent 。改变'。您可以监听此事件以了解列表中的选择何时更改。

    <s:List id="myList" dataProvider="{myData}" 
            change="handleIndexChange()"
            width="100%" height="100%" fontSize="24" />

该事件仅在所选索引实际发生更改时分派(dispatch)，这意味着当您第二次重新打开窗口时，可能仍会选择一个项目，并且当您单击该项目时，不会触发 CHANGE 事件。要解决此问题，只需在关闭窗口之前取消选择即可:

        public function close():void {
            myList.selectedIndex = -1;
            PopUpManager.removePopUp(this);
        }

还请确保在关闭窗口(并取消选择)之前 使用所选项目发送事件。

至于您关于绑定(bind)警告的问题:您收到该消息是因为您没有将“myData”标记为可绑定(bind)。要解决这个问题，只需使用 [Bindable] 标签:

[Bindable]
private var myData:ArrayList = new ArrayList();

或者如果您不需要它，则完全跳过绑定(bind)，只需将数据提供者分配给 ActionScript 中的列表:

myList.dataProvider = myData;