flex 学习笔记 一个可以动态缩放的tree

代码：自定义的ResizeTree.as

 
 

package??contr ?
  
  
{? ?
  
  
????import?flash.events.*; ?
  
  
????import?flash.utils.*; ?
  
  
???? ?
  
  
????import?mx.controls.Alert; ?
  
  
????import?mx.controls.Tree; ?
  
  
????import?mx.events.TreeEvent; ?
  
  
???? ?
  
  
????public?class?ResizeTree?extends?Tree?{? ?
  
  
???????? ?
  
  

????????private?var?timer:Timer?=?new?Timer(10,?1); ?

  
  

????????private?var?_autoStretch_:Boolean?=?false; ?

  
  
????????[Bindable] ?
  
  
????????public?function?get?autoStretch():Boolean{? ?
  
  
????????????return?_autoStretch_;? ?
  
  
????????}? ?
  
  
???????? ?
  
  
????????public?function?set?autoStretch(value:Boolean):void{ ?
  
  

????????????_autoStretch_?=?value;? ?

  
  
????????????if?(_autoStretch_)?{ ?
  
  
????????????????this.addEventListener(Event.RESIZE,?doStretch); ?
  
  
????????????????this.addEventListener(TreeEvent.ITEM_OPEN,?startStretch);? ?
  
  
????????????????this.addEventListener(TreeEvent.ITEM_CLOSE,?startStretch);? ?
  
  

????????????????this.verticalScrollPolicy?=?"off";? ?

  
  
????????????????stretch();? ?
  
  
????????????}?else?{ ?
  
  
????????????????timer.stop(); ?
  
  
????????????????this.removeEventListener(Event.RESIZE,?doStretch); ?
  
  
????????????????this.removeEventListener(TreeEvent.ITEM_OPEN,?startStretch); ?
  
  
????????????????this.removeEventListener(TreeEvent.ITEM_CLOSE,?startStretch); ?
  
  

????????????????this.verticalScrollPolicy?=?"auto";? ?

  
  
????????????}? ?
  
  
????????}? ?
  
  
???????? ?
  
  

????????protected?function?stretch(evtObj:Event?=?null):void{ ?

  
  

????????????var?items:Array?=?this.listItems;? ?

  
  

????????????var?borderThickness:Number?=?this.getStyle("borderThickness");? ?

  
  

????????????if?(this.height?-?borderThickness?*?2?<?this.rowHeight)?{ ?

  
  

????????????????thisthis.height?=?this.rowHeight?+?borderThickness?*?2;? ?

  
  
????????????}? ?
  
  

????????????if?(this.maxVerticalScrollPosition?>?0)?{ ?

  
  
????????????????this.height?+=?this.rowHeight?-?(this.height?-?borderThickness?*?2)?%?this.rowHeight; ?
  
  
????????????????return; ?
  
  
????????????}?else?if?(items[items.length?-?1]?==?"")?{ ?
  
  

????????????????this.height?-=?this.rowHeight?+?(this.height?-?borderThickness?*?2)?%?this.rowHeight; ?

  
  
????????????????return;? ?
  
  
????????????}? ?
  
  
????????}? ?
  
  
???????? ?
  
  

????????protected?function?startStretch(evtObj:Event?=?null):void{ ?

  
  
????????????timer.stop(); ?
  
  

????????????timer.delay?=?this.getStyle("openDuration")?+?50; ?

  
  
????????????timer.start();? ?
  
  
????????}? ?
  
  
???????? ?
  
  

????????protected?function?doStretch(evtObj:Event?=?null):void{ ?

  
  
????????????timer.stop();? ?
  
  

????????????timer.delay?=?10; ?

  
  
????????????timer.start();? ?
  
  
????????} ?
  
  
???????? ?
  
  

????????protected?function?onTimerComplete(evtObj:Event?=?null):void{ ?

  
  
????????????stretch();? ?
  
  
????????}? ?
  
  
???????? ?
  
  
????????public?function?ResizeTree():void{? ?
  
  
????????????super();? ?
  
  
????????????timer.addEventListener(TimerEvent.TIMER_COMPLETE,?onTimerComplete);? ?
  
  
????????}? ?
  
  
????}? ?
  
  
} ?
 
 

使用：

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  

<s:Application?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

???????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

???????????????xmlns:mx="library://ns.adobe.com/flex/mx"? ?

  
  

???????????????minWidth="955"?minHeight="600"?xmlns:logic="contr.*">?

  
  

????<fx:Declarations>?

  
  

????????<!--?将非可视元素（例如服务、值对象）放在此处?-->?

  
  

????????<fx:XMLList?id="treeData">?

  
  

????????????<node?label="选择数据集">?

  
  

????????????????<node?label="hsql">?

  
  

????????????????????<node?label="tabels">?

  
  

??????????????????????????<node?label="订单"?head="images/install.jpg"/>?

  
  

??????????????????????????<node?label="订单明细"?head="images/install.jpg"/>?

  
  

??????????????????????????<node?label="雇员"?head="images/install.jpg"/>?

  
  

????????????????????</node>? ?

  
  

????????????????</node>?

  
  

????????????????<node?label="mysql">?

  
  

????????????????????<node?label="tabels">?

  
  

??????????????????????????<node?label="demo_salesday"?head="images/install.jpg"/>?

  
  

??????????????????????????<node?label="Personal"?head="images/install.jpg"/>?

  
  

????????????????????</node>? ?

  
  

????????????????</node>?

  
  

????????????</node>?

  
  

????????</fx:XMLList>?

  
  

????</fx:Declarations>?

  
  

????<mx:VBox?backgroundColor="#CCCCCC"?width="100%"?height="100%"?verticalAlign="middle"?horizontalAlign="center">?

  
  

????????<logic:ResizeTree?dataProvider="{treeData}"?height="100"?autoStretch="true"?labelField="@label"??depthColors="[#CCCCCC,#f60f0f,#1c47e8,#31eb18]"/>?

  
  

????</mx:VBox>?

  
  

</s:Application>?

 
 

效果：点击节点 打开或关闭时 tree的高度会动态变化