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

最新推荐文章于 2024-08-18 14:38:32 发布

原创最新推荐文章于 2024-08-18 14:38:32 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条 #tree #Flex #TWaver

TWaver Flex 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种解决twaver.controls.Tree控件在设置ScrollPolicy.AUTO后未能显示横向滚动条的问题。通过创建AutoSizeTree子类，重写maxHorizontalScrollPosition方法来计算横向滚动条的最大位置，从而实现在需要时自动显示滚动条的功能。

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

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

package {
	import flash.events.Event;

	import mx.core.ScrollPolicy;
	import mx.core.mx_internal;

	import twaver.DataBox;
	import twaver.controls.Tree;

	public class AutoSizeTree extends Tree {
		public function AutoSizeTree(dataBox:DataBox=null) {
			super(dataBox);
			horizontalScrollPolicy = ScrollPolicy.AUTO;
		}

		override public function get maxHorizontalScrollPosition():Number {
			if (isNaN(mx_internal::_maxHorizontalScrollPosition))
				return 0;

			return mx_internal::_maxHorizontalScrollPosition;
		}

		override public function set maxHorizontalScrollPosition(value:Number):void {
			mx_internal::_maxHorizontalScrollPosition = value;
			dispatchEvent(new Event("maxHorizontalScrollPositionChanged"));

			scrollAreaChanged = true;
			invalidateDisplayList();
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			var diffWidth:Number = measureWidthOfItems(0,0) - (unscaledWidth - viewMetrics.left - viewMetrics.right);

			if (diffWidth <= 0)
				maxHorizontalScrollPosition = NaN;
			else
				maxHorizontalScrollPosition = diffWidth;

			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
	}
}

测试代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
				applicationComplete="init()" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import twaver.*;

			private function init():void {
				var box:ElementBox = new ElementBox();

				var group:Group = new Group();
				group.name = "Group";
				box.add(group);

				for(var i:int=0; i<20; i++){
					var node:Node = new Node();
					node.name = "Node with long long long long long long name " + Utils.randomInt(10000000);
					group.addChild(node);
					box.add(node);
				}

				tree.dataBox = box;
				tree.callLater2(function():void {
					tree.expandAll();
				});
			}
		]]>
	</mx:Script>
	<local:AutoSizeTree id="tree" width="300" height="100%"/>
</mx:Application>

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