我在互联网周围进行了很好的翻找,似乎找不到任何三态复选框的例子。它看起来不受SDK支持,我在网上找不到任何例子。
我认为这是一个常见的问题,在我开始自己编写之前,有没有人知道我可以使用的一个好的flex三态复选框组件:)
干杯,
Jawache。
答案 0 :(得分:4)
在Flex Cookbook上发布了一个示例here。您可以使用此代码轻松创建自己的组件。
答案 1 :(得分:2)
对于后来遇到此问题的其他人,我制作了自己的自定义组件,只隐藏了第三个状态的复选框,并将其替换为看起来像第三个状态的复选框的图像。这很容易实现:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
public static const BOX_CHECKED:int = 1;
public static const BOX_REJECTED:int = -1;
public static const BOX_UNCHECKED:int = 0;
[Bindable] public var boxVisible:Boolean = true;
[Bindable] public var enum_id:int = -1;
protected function checkbox_clickHandler(event:MouseEvent):void
{
if(!checkbox.selected)
boxVisible = false;
}
protected function image_clickHandler(event:MouseEvent):void
{
boxVisible = true;
}
public function set label(str:String):void {
checkbox.label = str;
xLabel.text = str;
}
public function get boxState():int {
if(checkbox.selected)
return BOX_CHECKED;
else if(redX.visible)
return BOX_REJECTED;
return BOX_UNCHECKED;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:CheckBox id="checkbox" click="checkbox_clickHandler(event)" visible="{boxVisible}" includeInLayout="{boxVisible}"/>
<s:HGroup>
<s:Image id="redX" source="@Embed('assets/icons/redX.png')"
width="16" height="16"
click="image_clickHandler(event)"
visible="{!boxVisible}" includeInLayout="{!boxVisible}"/>
<s:Label id="xLabel" visible="{!boxVisible}" includeInLayout="{!boxVisible}" paddingTop="4"/>
</s:HGroup>
</s:Group>
答案 2 :(得分:1)
这是我自己的版本,灵感来自詹姆斯的一个。您可以启用/禁用三态以获得具有相同组件的经典复选框,并且使用的机制略有不同,并且具有较少的样板。嵌入图片为here。 使用风险自负! :)
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
// STATES :
/** The intermediate state value. */
public static const INTERMEDIATE:int = -1;
/** The unchecked state value. */
public static const UNCHECKED:int = 0;
/** The checked state value. */
public static const CHECKED:int = 1;
// TRISTATE :
private var _isTristate:Boolean;
/** Whether this checkbox is tristate or a normal checkbox. */
[Bindable] public function get isTristate():Boolean { return _isTristate; }
public function set isTristate(value:Boolean):void {
_isTristate = value;
if(!_isTristate && state == INTERMEDIATE)
state = UNCHECKED;
}
// LABEL :
/** The checkbox label. */
[Bindable] public var label:String;
// STATE CHANGE :
private var _state:int;
/** The current state of the box. */
public function get state():int { return _state; }
public function set state(value:int):void {
_state = value;
switch(_state) {
case INTERMEDIATE:
if(!_isTristate)
throw new Error("Setting state to INTERMEDIATE on a non tristate checkbox !");
tristateImg.visible = true;
checkbox.selected = false;
break;
case UNCHECKED:
tristateImg.visible = false;
checkbox.selected = false;
break;
case CHECKED:
tristateImg.visible = false;
checkbox.selected = true;
break;
}
}
/**
* Simply sets the state according to the current state.
*/
protected function changeState(ev:Event):void {
if(isTristate) ev.preventDefault();
switch(state) {
case INTERMEDIATE: state = CHECKED; break;
case UNCHECKED: state = isTristate ? INTERMEDIATE : CHECKED; break;
case CHECKED: state = UNCHECKED; break;
}
}
/**
* Initial state.
*/
protected function init():void {
state = UNCHECKED;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:BasicLayout />
</s:layout>
<s:CheckBox id="checkbox" label="{label}"
change="changeState(event)"/>
<s:Image id="tristateImg"
mouseEnabled="false" mouseChildren="false"
source="@Embed('assets/icons/tristate_checkbox.png')"
x="2" y="5" />
</s:Group>
答案 3 :(得分:0)