我正在使用带有自定义项目渲染器的组合框,每个项目都包含一个“删除”按钮,用于从列表中删除相应的项目。问题是当我点击这个按钮时,组合框弹出窗口会自动关闭,当我点击按钮时,如何强制它保持打开?
这是如何声明我的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>
答案 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)
也许你应该扩大你的组合框,以便在失去焦点或关闭时保持开放状态?按删除按钮会导致焦点丢失事件进入组合框。