要做个下拉框带树结构的控件。
找了几个组件拼凑了个出来了。
?
?
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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()"
width="400" height="300"
showStatusBar="false">
<fx:Script>
<![CDATA[
import flashx.textLayout.operations.CutOperation;
import flashx.textLayout.operations.DeleteTextOperation;
import flashx.textLayout.operations.FlowOperation;
import mx.collections.ArrayCollection;
import mx.collections.ArrayList;
import mx.collections.IList;
import mx.collections.XMLListCollection;
import mx.events.ListEvent;
import mx.utils.StringUtil;
import spark.events.TextOperationEvent;
[Bindable]
private var xm:XML =
<root>
<league label="全公司" data="1234" isdep="true">
<division label="开发" data="2234" isdep="true">
<team label="应用" data="2234" isdep="true"/>
<team label="系统" data="1" isdep="true"/>
<team label="测试" data="234" isdep="true">
<team label="研发吗" data="34" isdep="false"/>
<team label="研发里面" data="56" isdep="false"/>
<team label="研发里" data="153" isdep="false"/>
</team>
<team label="支撑" data="214" isdep="true"/>
</division>
<division label="销售">
<team label="浙江" data="89" isdep="true"/>
<team label="cfdw" data="76" isdep="true"/>
<team label="江苏" data="1255" isdep="true"/>
<team label="上海" data="164" isdep="true">
<team label="上海1" data="34" isdep="false"/>
<team label="上海12" data="56" isdep="false"/>
<team label="上海2" data="153" isdep="false"/>
</team>
<team label="Kansas" data="17834" isdep="false"/>
</division>
<division label="财务" data="1y4" isdep="true">
<team label="tobg" data="1gf4" isdep="false"/>
<team label="tyue" data="5" isdep="false"/>
<team label="Toronto" data="134" isdep="false"/>
<team label="tyar" data="4" isdep="false"/>
<team label="Tampa Bay" data="ui" isdep="false"/>
</division>
<division label="产品" data="734" isdep="true"/>
<division label="cds" data="120" isdep="false"/>
</league>
</root>
;
[Bindable]
public var selectedNode:XML;
[Bindable]
private var a:XMLList = new XMLList();
[Bindable]
private var b:XMLListCollection = new XMLListCollection();
[Bindable]
private var c:ArrayCollection = new ArrayCollection();
[Bindable]
private var bp:ArrayCollection = new ArrayCollection();
private function init():void
{
a = xm.league;
b = new XMLListCollection(a);
c = new ArrayCollection(b.toArray());
this.addEventListener(MouseEvent.MOUSE_DOWN, focusOut);
}
private function focusOut(event:MouseEvent):void
{
if(event.currentTarget.id != 'treelist' && event.currentTarget.id != 'relist')
{
result.displayPopUp = false;
frmPUA.displayPopUp = false;
}
}
protected function openBtn_clickHandler(event:MouseEvent):void
{
// if(result.displayPopUp || frmPUA.displayPopUp)
// {
// result.displayPopUp = false;
// frmPUA.displayPopUp = false;
// }else
// {
frmPUA.displayPopUp = true;
// }
}
protected function textin_changeHandler(event:TextOperationEvent):void
{
var operation:FlowOperation = event.operation;
if (operation is DeleteTextOperation || operation is CutOperation)
{
result.displayPopUp = false;
}
else
{
if (result.displayPopUp = false)
{
result.displayPopUp = true;
return;
}
var keyWord:String = StringUtil.trim(textin.text);
if(keyWord!='')
{
searchKeyWord(keyWord);
}
else
{
result.displayPopUp =false;
}
}
}
private function searchKeyWord(keyWord:String):void
{
bp.removeAll();
bp = filterData(c,keyWord);
// var typedLength:int = textin.text.length;
// var ob:XML = new XML();
if(bp.length > 0)
{
// 搜索时可以让输入框内文字变化，见spark的combobox组件源码
// ob = bp[0] as XML;
// var itemString:String = ob.@label;
// textin.selectAll();
// textin.insertText(itemString);
// textin.selectRange(typedLength, itemString.length);
frmPUA.displayPopUp = false;
result.displayPopUp = true;
textin.addEventListener(KeyboardEvent.KEY_UP, changeFocous);
}
else
{
frmPUA.displayPopUp = false;
result.displayPopUp = false;
if(selectedNode)
{
textin.text = selectedNode.@label;
}
else
{
textin.text = '';
}
}
}
private function changeFocous(event:KeyboardEvent):void
{
if(event.keyCode == 40 || event.keyCode == 13)
{
relist.setFocus();
relist.selectedIndex = 0;
}
}
private function filterData(ac:ArrayCollection, keyword:String):ArrayCollection
{
var xm:XML = ac[0] as XML;
find(xm, keyword);
return bp;
}
// 递归遍历xml
private function find( node:XML, keyword:String ):void
{
for each ( var element:XML in node.elements( ) )
{
var str:String = element.@label;
//区分大小写时 str.indexOf(keyword)
//不区分大小写 str.search(new RegExp(keyword,"gi")
if(str.search(new RegExp(keyword,"gi")) != -1 )
{
// 可以根据在xml标签里定义哪些可以被搜索
// if(element.@isdep == 'false')
// {
var item:Object = element as Object;
if(str == keyword)//出现完全匹配但不在队列前端的将其加到列表最前端
{
bp.addItemAt(item,0);
}else
{
bp.addItem(item);
}
// }
}
find( element,keyword );
}
}
private function listchange(e:ListEvent):void
{
selectedNode = Tree(e.target).selectedItem as XML;
textin.text = selectedNode.@label;
frmPUA.displayPopUp = false;
}
protected function relist_clickHandler(event:MouseEvent):void
{
selectedNode = relist.selectedItem as XML;
textin.text = selectedNode.@label;
result.displayPopUp = false;
}
protected function relist_keyUpHandler(event:KeyboardEvent):void
{
if(event.keyCode == 13)
{
selectedNode = relist.selectedItem as XML;
textin.text = selectedNode.@label;
result.displayPopUp = false;
}
}
]]>
</fx:Script>
<fx:Declarations>
<mx:Tree id="tree1" dataProvider="{c}" width="150" labelField="@label"
selectedIndex="0" />
</fx:Declarations>
<s:Panel x="10" y="10" width="90%" height="90%" title="My ComBoTree Selector Example">
<s:Group id="vg" x="10" y="10">
<s:TextInput x="0" y="0" width="130" height="20" id="textin" change="textin_changeHandler(event)"/>
<s:Button x="130" y="0" id="openBtn" width="20" height="20" label="O"
click="openBtn_clickHandler(event)"/>
<s:PopUpAnchor id="frmPUA" x="0" y="20" popUpWidthMatchesAnchorWidth="true"
popUpPosition="topLeft" width="150" height="200">
<mx:Tree id="treelist" dataProvider="{c}" maxHeight="200" labelField="@label"
selectedIndex="0" change="listchange(event)"/>
</s:PopUpAnchor>
<s:PopUpAnchor id="result" x="0" y="20" popUpWidthMatchesAnchorWidth="true"
popUpPosition="topLeft" width="150" height="200">
<s:List id="relist" dataProvider="{bp}" height="100%" width="100%" maxHeight="200"
labelField="@label" selectedIndex="-1" keyUp="relist_keyUpHandler(event)"
click="relist_clickHandler(event)"/>
</s:PopUpAnchor>
</s:Group>
<!--<mx:PopUpButton width="150" popUp="{tree1}" label="{tree1.selectedItem.@label}"/> -->
</s:Panel>
</s:WindowedApplication>
?
?
?
?
?
?
?
?