如何让Flex的Tree显示水平滚动条

原文出处：http://twaver.servasoft.com/?p=3631

论坛一直有人问为何设置了twaver.controls.Tree的horizontalScrollPolicy为 ScrollPolicy.AUTO，可是还是没有横向滚动条。这是由于Adobe出于性能的考虑，没有计算maxHorizontalScrollPosition的值。本文贴出了解决方案，效果如下：

从原始Tree继承出新的类AutoSizeTree：

 1 package {
 2     import flash.events.Event;
 3 
 4     import mx.core.ScrollPolicy;
 5     import mx.core.mx_internal;
 6 
 7     import twaver.DataBox;
 8     import twaver.controls.Tree;
 9 
10     public class AutoSizeTree extends Tree {
11         public function AutoSizeTree(dataBox:DataBox=null) {
12             super(dataBox);
13             horizontalScrollPolicy = ScrollPolicy.AUTO;
14         }
15 
16         override public function get maxHorizontalScrollPosition():Number {
17             if (isNaN(mx_internal::_maxHorizontalScrollPosition))
18                 return 0;
19 
20             return mx_internal::_maxHorizontalScrollPosition;
21         }
22 
23         override public function set maxHorizontalScrollPosition(value:Number):void {
24             mx_internal::_maxHorizontalScrollPosition = value;
25             dispatchEvent(new Event("maxHorizontalScrollPositionChanged"));
26 
27             scrollAreaChanged = true;
28             invalidateDisplayList();
29         }
30 
31         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
32             var diffWidth:Number = measureWidthOfItems(0,0) - (unscaledWidth - viewMetrics.left - viewMetrics.right);
33 
34             if (diffWidth <= 0)
35                 maxHorizontalScrollPosition = NaN;
36             else
37                 maxHorizontalScrollPosition = diffWidth;
38 
39             super.updateDisplayList(unscaledWidth, unscaledHeight);
40         }
41     }
42 }

测试代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 3                 xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
 4                 applicationComplete="init()" xmlns:local="*">
 5     <mx:Script>
 6         <![CDATA[
 7             import twaver.*;
 8 
 9             private function init():void {
10                 var box:ElementBox = new ElementBox();
11 
12                 var group:Group = new Group();
13                 group.name = "Group";
14                 box.add(group);
15 
16                 for(var i:int=0; i<20; i++){
17                     var node:Node = new Node();
18                     node.name = "Node with long long long long long long name " + Utils.randomInt(10000000);
19                     group.addChild(node);
20                     box.add(node);
21                 }
22 
23                 tree.dataBox = box;
24                 tree.callLater2(function():void {
25                     tree.expandAll();
26                 });
27             }
28         ]]>
29     </mx:Script>
30     <local:AutoSizeTree id="tree" width="300" height="100%"/>
31 </mx:Application>

如果您数据量少，性能不是大问题，不妨试一试，完整工程代码见附件：TestAutoSizeTree