ComboBox自动关闭

时间:2012-06-01 07:47:53

标签: flex

我正在使用带有自定义项目渲染器的组合框,每个项目都包含一个“删除”按钮,用于从列表中删除相应的项目。问题是当我点击这个按钮时,组合框弹出窗口会自动关闭,当我点击按钮时,如何强制它保持打开?

这是如何声明我的ComboBox:

<s:ComboBox id="addressIn" width="150" height="23" skinClass="maincomponents.ServerAddressComboBoxSkin" dataProvider="{this._servers}" enabled="true" enabled.loading="false" />

相应的皮肤:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5"> 

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.ComboBox")]
        ]]>
    </fx:Metadata> 

    <!--
        NOTE: this skin file contains sub-parts that may continue to react to
        Style code.  To remove this behavior create new copies of those skins
        and remove the styles.
    -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>

    <!--- 
        The PopUpAnchor control that opens the drop-down list. 

        <p>In a custom skin class that uses transitions, set the 
        <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                   left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">

        <!--- 
            This includes borders, background colors, scrollers, and filters. 
            @copy spark.components.supportClasses.DropDownListBase#dropDown
        -->
        <s:Group id="dropDown">

            <!-- drop shadow -->
            <!--- @private -->
            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                     angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

            <!-- border -->
            <!--- @private -->
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <!--- @private -->
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>

            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!---  
                        @private
                        The color of the drop down's background fill.
                        The default color is 0xFFFFFF.
                    -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <!--- @private -->
            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" horizontalScrollPolicy="off" skinClass="fbcomponents.skinScrollSettingsDD">
                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                <s:DataGroup id="dataGroup" clipAndEnableScrolling="true" itemRenderer="maincomponents.DataList_ServerRepeatedItem">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                    </s:layout>
                </s:DataGroup> 
            </s:Scroller>

        </s:Group>
    </s:PopUpAnchor>

    <!---  The default skin is ComboBoxButtonSkin. 
            @copy spark.components.supportClasses.DropDownListBase#openButton
            @see spark.skins.spark.ComboBoxButtonSkin -->
    <s:Button id="openButton" width="20" right="0" top="0" bottom="0" focusEnabled="false"
              skinClass="maincomponents.ServerAddressComboBoxButtonSkin" tabEnabled="false" />  
    <!--- @copy spark.components.ComboBox#textInput -->
    <s:TextInput id="textInput" enabled.disabled="false"
                 left="0" right="19" top="0" bottom="0" 
                 skinClass="maincomponents.ServerAddressComboBoxTextInputSkin"/> 

</s:SparkSkin>

项目渲染器:

<s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                xmlns:ai="http://ns.adobe.com/ai/2009"
                xmlns:d="http://ns.adobe.com/fxg/2008/dt" dataChange="onDataChangeHandler(event)" valueCommit="adaptBg()"
                xmlns:flm="http://ns.adobe.com/flame/2008"
                minWidth="161" height="20" autoDrawBackground="false" fc:resizable="true">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.StateChangeEvent;

            import spark.components.List;

            protected function onDataChangeHandler(event:FlexEvent):void
            {
                this.title.text = this.data as String;
                this.adaptBg();
            }

             protected function adaptBg():void
            {
                this.bg.color = (itemIndex % 2 == 0) ? 0xEFEFEF : 0xE0E0E0;
            } 

        ]]>
    </fx:Script>


    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>
    <s:Rect x="0" y="0" width="161" height="20">
        <s:fill>
            <s:SolidColor id="bg" color="#EFEFEF"/>
        </s:fill>
    </s:Rect>
    <s:Rect x="0" y="0" width="161" height="20"
            visible.normal="false">
        <s:fill>
            <s:LinearGradient x="137" y="0" scaleX="31" rotation="90">
                <s:GradientEntry ratio="0" color="#FFEDD1"/>
                <s:GradientEntry ratio="0.5" color="#FFD180"/>
                <s:GradientEntry ratio="0.51" color="#EBAA1D"/>
                <s:GradientEntry ratio="1" color="#CF951A"/>
            </s:LinearGradient>
        </s:fill>
        <s:fill.hovered>
            <s:SolidColor alpha="0.24" color="#000000"/>
        </s:fill.hovered>
    </s:Rect>
    <s:Button x="5" y="2" width="20" height="16" buttonDown="trace('ok');" />
    <s:RichText id="title" d:id="103" d:userLabel="caldera0003" x="32" verticalCenter="1" ai:aa="2" color="#292929"
                columnCount="1" fontFamily="HelveticaNeueLT Pro 57 Cn" fontSize="14"
                kerning="on" tabStops="S36" flm:variant="34"
                whiteSpaceCollapse="preserve"/>
    <s:Rect width="274" height="31"
            visible="false" alpha.hovered="0.3"
            alpha.normal="0"
            alpha.selected="0.5">
        <s:fill>
            <s:SolidColor color="0xCED7EE"/>
        </s:fill>
    </s:Rect>
</s:ItemRenderer>

3 个答案:

答案 0 :(得分:2)

我在评论中提到过,但你指出你的情况有所不同。首先阅读我关于向DropDownList项添加“删除”按钮的问题的答案:Create dropdownlist with delete button in this itemrenderer

只需要从代码中更改一件事就可以获得所需内容,即弹出窗口必须在删除项目时保持打开状态。转到自定义ItemRenderer,找到“删除”按钮标记,并阻止事件传播。如果事件没有传播,DropDownList将永远不会捕获它,当用户点击Button时,弹出窗口永远不会关闭。

<s:Button verticalCenter="0" right="10" width="16" height="16"
          mouseDown="event.stopImmediatePropagation(); remove()" />

答案 1 :(得分:0)

也许我理解错了,但你不能只在你的删除按钮上添加mouseDown处理程序并停止其中的事件传播吗?像

<s:Button x="5" y="2"
          width="20" height="16"
          mouseDown="button1_mouseDownHandler(event)" buttonDown="trace('ok');"
          />

protected function button1_mouseDownHandler(event:MouseEvent):void
{
    event.stopPropagation();
    ...
}

答案 2 :(得分:0)

也许你应该扩大你的组合框,以便在失去焦点或关闭时保持开放状态?按删除按钮会导致焦点丢失事件进入组合框。