flex下的树形下拉框treecombobox

本文介绍了一个使用Flex实现的组合框组件,该组件结合了ComboBox和Tree的功能。通过自定义的组合框,用户可以从层级结构的数据中选择项。文章提供了完整的代码示例,包括组件的创建、事件处理以及如何在应用程序中调用。
不多说了,组件代码如下:
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:ComboBoxxmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="initComponent()">
  3. <mx:Script>
  4. <![CDATA[
  5. importmx.events.FlexEvent;
  6. [Bindable]
  7. privatevar_label:String;
  8. [Bindable]
  9. publicvartreeSelectedItem:Object;
  10. publicfunctioninitComponent():void
  11. {
  12. }
  13. publicfunctionupdateLabel(event:*):void{
  14. _label=event.currentTarget.selectedItem[this.labelField];
  15. treeSelectedItem=event.currentTarget.selectedItem;
  16. }
  17. overrideprotectedfunctionupdateDisplayList(unscaledWidth:Number,
  18. unscaledHeight:Number):void
  19. {
  20. super.updateDisplayList(unscaledWidth,unscaledHeight);
  21. if(dropdown&&_label!=null){
  22. text=_label;
  23. }
  24. }
  25. ]]>
  26. </mx:Script>
  27. <mx:dropdownFactory>
  28. <mx:Component>
  29. <mx:TreecreationComplete="initTree()"change="outerDocument.updateLabel(event)"showRoot="true"height="500"width="500">
  30. <mx:Script>
  31. <![CDATA[
  32. publicfunctioninitTree():void{
  33. varlen:int=super.dataProvider.length;
  34. for(vari:int;i<len;i++)
  35. {
  36. super.expandChildrenOf(super.dataProvider[i],true);
  37. }
  38. super.selectedItem=outerDocument.treeSelectedItem;
  39. }
  40. ]]>
  41. </mx:Script>
  42. </mx:Tree>
  43. </mx:Component>
  44. </mx:dropdownFactory>
  45. </mx:ComboBox>
调用的app代码如下:
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:ns1="components.*">
  3. <ns1:ComboTreewidth="300"id="combo"labelField="@label">
  4. <mx:XMLListCollectionid="MailBox">
  5. <mx:XMLList>
  6. <folderlabel="Mail">
  7. <folderlabel="INBOX"/>
  8. <folderlabel="PersonalFolder">
  9. <Pfolderlabel="Business"/>
  10. <Pfolderlabel="Demo"/>
  11. <Pfolderlabel="Personal"isBranch="true"/>
  12. <Pfolderlabel="SavedMail"/>
  13. </folder>
  14. <folderlabel="Sent"/>
  15. <folderlabel="Trash"/>
  16. </folder>
  17. <folderlabel="Mail2">
  18. <folderlabel="INBOX2"/>
  19. <folderlabel="PersonalFolder2">
  20. <Pfolderlabel="Business2"/>
  21. <Pfolderlabel="Demo2"/>
  22. <Pfolderlabel="Personal2"isBranch="true"/>
  23. <Pfolderlabel="SavedMail2"/>
  24. </folder>
  25. <folderlabel="Sent2"/>
  26. <folderlabel="Trash2"/>
  27. </folder>
  28. </mx:XMLList>
  29. </mx:XMLListCollection>
  30. </ns1:ComboTree>
  31. </mx:Application>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值