單擊嵌入式復選框時，組合框否關閉[FLEX]

Question

我已經到達一個下拉菜單，其中嵌入了一棵樹。 每個節點都有一個復選框。

這個想法是能夠在不關閉下拉菜單的情況下導航和勾選復選框。 單擊復選框后，無法使此下拉列表保持打開狀態！

當在PermissionTreeItemRendererV2.as> handleChkClick（evt）> this.itemXml。@ checked = {“ 0”或“ 1”}中更新xml時，將發生關閉下拉列表的事件。

任何想法如何調整代碼以禁用此煩人的事件？

sample_combobox.mxml：

<?xml version="1.0"?> 
<mx:Application xmlns:local="local.*" 
                xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="loadXML()"> 
    <mx:Script> 
        <![CDATA[ 
            import mx.collections.XMLListCollection; 
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.mxml.HTTPService; 

            public var xmlService:HTTPService = new HTTPService(); 
            [Bindable]
            public var xmlResult:XML;
            [Bindable]
            public var xmlList:XMLList; 
            [Bindable]
            public var xmlTeams:XMLListCollection;

            public function loadXML():void
            {
                xmlService.url = "mlb.xml"           
                xmlService.resultFormat = "e4x";
                xmlService.addEventListener(ResultEvent.RESULT, resultHandler); 
                xmlService.send();
            }

            public function resultHandler(event:ResultEvent):void 
            {
                xmlResult = XML(event.result);
                xmlList = xmlResult.league;
                xmlTeams = new XMLListCollection(xmlList);
            }
        ]]>
    </mx:Script>    

    <local:TreeComboBox
        width="300"
        id="combo"
        labelField="@label" dataProvider="{xmlTeams}" />
</mx:Application>

TreeCombobox.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<local:ComboBoxNoClose xmlns:mx="http://www.adobe.com/2006/mxml" 
                        xmlns:local="local.*">
    <mx:Script> 
        <![CDATA[ 
            import mx.events.FlexEvent; 

            [Bindable] 
            private var _label:String; 
            [Bindable] 
            public var treeSelectedItem:Object;

            public function updateLabel(event:*):void 
            {   
                _label = event.currentTarget.selectedItem[this.labelField];     
                treeSelectedItem = event.currentTarget.selectedItem;
            }

            override protected function updateDisplayList(unscaledWidth:Number,
                                                          unscaledHeight:Number):void 
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                if(dropdown && _label != null){
                    text = "";//_label;
                }
            }
        ]]>
    </mx:Script>
    <local:dropdownFactory>
        <mx:Component>
            <mx:Tree change="outerDocument.updateLabel(event)" height="500"
                     width="500"
                     itemRenderer="local.PermissionsTreeItemRendererV2"
                     folderClosedIcon="{null}"
                     folderOpenIcon="{null}"
                     defaultLeafIcon="{null}" />
        </mx:Component>
    </local:dropdownFactory>

</local:ComboBoxNoClose>

PermissionTreeItemRendererV2.as

// ActionScript file
package local
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.collections.ArrayCollection;
    import mx.collections.ArrayList;
    import mx.collections.ListCollectionView;
    import mx.controls.CheckBox;
    import mx.controls.treeClasses.TreeItemRenderer;
    import mx.controls.treeClasses.TreeListData;

    public class PermissionsTreeItemRendererV2 extends TreeItemRenderer{
        public var chk:CheckBox;
        public var itemXml:XML;
        public function PermissionsTreeItemRendererV2(){
            super();
            mouseEnabled = false;
        }
        override public function set data(value:Object):void{
            if(value != null){
                super.data = value;

                this.itemXml = XML(value);
                if(this.itemXml.@checked == "1"){
                    this.chk.selected = true;
                }else{
                    this.chk.selected = false;
                }
            }
        }
        override protected function createChildren():void{
            super.createChildren();
            chk = new CheckBox();
            chk.addEventListener(MouseEvent.CLICK, handleChkClick);
            addChild(chk);
        }
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            if(super.data){
                var tld:TreeListData = TreeListData(super.listData);
                //In some cases you only want a checkbox to appear if an 

                //item is a leaf
                //if so, then keep the following block uncommented, 
                //otherwise you can comment it out to display the checkbox 

                //for branch nodes
                if(tld.hasChildren){
                    this.chk.visible = true;
                }else{
                    //You HAVE to have the else case to set visible to true
                    //even though you'd think the default would be visible
                    //it's an issue with itemrenderers...
                    this.chk.visible = true;
                }
                if(chk.visible){
                    //if the checkbox is visible then
                    //reposition the controls to make room for checkbox
                    this.chk.x = super.label.x
                    super.label.x = this.chk.x + 17;
                    this.chk.y = super.label.y+8;
                }
            }
        }

        private function handleChkClick(evt:MouseEvent):void
        {
            if(this.chk.selected)
            {

                this.itemXml.@checked = "1";

            }
            else
            {

                this.itemXml.@checked = "0";

            }
        }
    }
}

ComboboxNoClose.as：

package local
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.controls.CheckBox;
    import mx.controls.ComboBox;
    import mx.events.DropdownEvent;
    import mx.events.ListEvent;

    public class ComboBoxNoClose extends ComboBox
    {
        public function ComboBoxNoClose()
        {
            super();
        }

        public function onOpen(event:Event):void
        {
            event.stopImmediatePropagation();
        }

        public override function close(trigger:Event = null):void
        {
            if (trigger != null)
            {
                super.close();
            }
        }
    }
}

填充樹的mlb.xml：

<?xml version="1.0" encoding="utf-8"?> 
<root> 
        <league label="American League"> 
                <division label="West"> 
                        <team label="Los Angeles" /> 
                        <team label="Seattle" /> 
                        <team label="Oakland" /> 
                        <team label="Texas" /> 
                </division> 
                <division label="Central"> 
                        <team label="Cleveland" /> 
                        <team label="Detroit" /> 
                        <team label="Minnesota" /> 
                        <team label="Chicago" /> 
                        <team label="Kansas City" /> 
                </division> 
                <division label="East"> 
                        <team label="Boston" /> 
                        <team label="New York" /> 
                        <team label="Toronto" /> 
                        <team label="Baltimore" /> 
                        <team label="Tampa Bay" /> 
                </division> 
        </league> 
</root>

Answer 1

彈出窗口的默認行為是，當您單擊下拉列表時，它會自行關閉。 你可以這樣解決這個問題

    <mx:PopUpButton id="popup" width="100%" label="{label}" close="popup_closeHandler(event)" open="popup_openHandler(event)" openAlways="true">
        <mx:popUp>
            <mx:VBox width="{popup.width*1.25}" mouseEnabled="false" verticalGap="1">
                <mx:List id="listSelectAll" width="100%" rowCount="1" selectable="true" itemClick="listSelectAll_itemClickHandler(event)">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object id="selectAll" selected="" label="All"/>
                        </mx:Array>
                    </mx:dataProvider>
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox width="100%" height="100%" mouseChildren="false">
                                <mx:CheckBox selected="{data.selected}" label="{data.label}" width="100%"/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:List>
                <mx:List id="listItems" width="100%" dataProvider="{_dataProvider}" itemClick="listItems_itemClickHandler(event)" variableRowHeight="true">
                    <mx:itemRenderer>
                        <mx:Component>
                            <!--
                            <mx:HBox width="100%" height="100%" mouseChildren="false" verticalAlign="middle">
                                <mx:CheckBox selected="{data[outerDocument.selectedField]}" label="{data[outerDocument.labelField]}" width="100%"/>
                            </mx:HBox>
                            -->
                            <mx:HBox width="100%" mouseChildren="false" verticalAlign="middle" horizontalAlign="left" paddingLeft="4">
                                <mx:Script>
                                    <![CDATA[
                                        override public function set data(value: Object) : void {
                                            super.data = value;
                                            if(data.iconCache == null || outerDocument.cacheIcon == false) {
                                                imgIcon.source = data[outerDocument.iconField];
                                            } else {
                                                imgIcon.source = new Bitmap(data.iconCache);
                                            }
                                        }

                                        protected function image_ioErrorHandler(event:IOErrorEvent):void {
                                            imgIcon.visible = imgIcon.includeInLayout = false;
                                        }

                                        protected function imgIcon_completeHandler(event:Event):void {
                                            imgIcon.visible = imgIcon.includeInLayout = true;
                                            if(outerDocument.cacheIcon) {
                                                var bitmapData:BitmapData = Bitmap(imgIcon.content).bitmapData;
                                                //var bitmap:Bitmap = new Bitmap(bitmapData);
                                                data.iconCache = bitmapData;
                                                //imgIcon.removeEventListener(Event.COMPLETE, imgIcon_completeHandler);                                             
                                            }
                                        }

                                    ]]>
                                </mx:Script>

                                <mx:CheckBox id="chkSelected" selected="{data[outerDocument.selectedField]}"/>
                                <mx:Image id="imgIcon" width="{outerDocument.iconWidth}" height="{outerDocument.iconHeight}" visible="{data[outerDocument.iconField]}" includeInLayout="{data[outerDocument.iconField]}" complete="imgIcon_completeHandler(event)" ioError="image_ioErrorHandler(event)"/>
                                <mx:Label id="lblText" text="{data[outerDocument.labelField]}"/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:List>
            </mx:VBox>
        </mx:popUp>
    </mx:PopUpButton>

或者，您可以訪問我的帖子以獲取完整的實現。 這里