How to Show the Horizontal Scroll Bar on the Tree in Flex

In our official forum, many people have asked that why there is still no horizontal scroll bar when they have already set “horizontalScrollPolicy” of “twaver.controls.Tree” as ScrollPolicy.AUTO. This is that the value of maxHorizontalScrollPosition is not calculated for the sake of high performance in Adobe. In this article, we have provided the solution, please see the following effect:

Inherit from the original Tree and get the new class 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);
        }
    }
}

Test Code：

<?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>

If you do not have a large amount of data, the performance will be, of course, very high. Why don’t have a try?