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

最新推荐文章于 2024-09-24 18:46:25 发布

原创最新推荐文章于 2024-09-24 18:46:25 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex

Flex 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何解决Twaver控件Tree设置为自动横向滚动但未显示滚动条的问题，通过继承并修改Tree类来实现正确显示滚动条。提供了一个示例MXML代码用于演示解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

package com.render
{
import flash.events.Event;

import mx.controls.Alert;
import mx.controls.Tree;
import mx.core.ScrollPolicy;
import mx.core.mx_internal;

public class AutoSizeTree extends Tree
{
public function AutoSizeTree()
{
super();
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);

var indentation:Number = getStyle("indentation");

if (diffWidth <= 0)
maxHorizontalScrollPosition = NaN;
else
maxHorizontalScrollPosition = diffWidth + indentation;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
}
}

如果您数据量少，性能不是大问题，不妨试一试

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cmp="com.render.*"
height="100%" width="100%" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
<cmp:AutoSizeTree
id="checkTree"
itemRenderer="com.render.CheckTreeRenderer"
change="updataDataGrid()"
labelField="@label"
width="100%" height="100%"
horizontalScrollPolicy="auto" >
</cmp:AutoSizeTree>
</mx:Application>