TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

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

Posted on 2012-01-31 17:29 TWaver 阅读(2616) 评论(1)  编辑  收藏
论坛一直有人问为何设置了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


评论

# re: 如何让Flex的Tree显示水平滚动条  回复  更多评论   

2012-02-05 20:34 by 长沙网络公关
override public function set maxHorizontalScrollPosition(value:Number):void {
24 mx_internal::_maxHorizontalScrollPosition = value;
25 dispatchEvent(new Event("maxHorizontalScrollPositionChanged"));
26
27 scrollAreaChanged = true;
28 invalidateDisplayList();

貌似有点小问题

只有注册用户登录后才能发表评论。


网站导航: