Search code examples
apache-flexactionscript-3treeitemrenderer

Flex Tree scrolling goes buggy after adding custom TreeItemRenderer


I have the follow code - as TreeItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:TreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" 
                     xmlns:mx="library://ns.adobe.com/flex/mx"
                     xmlns:solar="*">
    <fx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import mx.containers.VBox;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.CheckBox;
            import mx.controls.Tree;
            import mx.controls.listClasses.BaseListData;
            import mx.controls.treeClasses.TreeListData;
            import mx.core.mx_internal;
            use namespace mx_internal;

            protected var buttonBox : VBox;

            override protected function createChildren() : void
            {
                super.createChildren();
                setStyle( "verticalAlign", "top" );

                this.addEventListener( MouseEvent.CLICK, mouseHandler );
            }

            protected function mouseHandler( event : MouseEvent ) : void
            {

                if( data.@buttonsVisible == "true" )
                    data.@buttonsVisible = "false"
                else
                    data.@buttonsVisible = "true";

                showButtons();
            }

            private function showButtons() : void
            {
                if(  true )
                {
                    if( buttonBox == null )
                    {
                        buttonBox = new VBox();
                        buttonBox.setStyle( "verticalGap", 0 );
                        addChild( buttonBox );

                        var b1 : Button     = new Button();
                        b1.percentWidth = 100;
                        b1.label        = "block";
                        buttonBox.addChild( b1 );

                        var b2 : Button     = new Button();
                        b2.percentWidth = 100;
                        b2.label        = "block1";
                        buttonBox.addChild( b2 );

                        var b3 : Button     = new Button();
                        b3.percentWidth = 100;
                        b3.label        = "block";
                        buttonBox.addChild( b3 );
                    }
                }
                else 
                    if( buttonBox != null )
                    {
                        removeChild( buttonBox );
                        buttonBox = null;
                    }
                invalidateSize();
                invalidateDisplayList();
            }

            override public function set listData( value : BaseListData ) : void
            {
                super.listData = value;

                if( listData )
                {
                    showButtons();
                }
            }

            override protected function measure() : void
            {
                super.measure();

                if( buttonBox != null )
                {

                    //buttonBox.visible = buttonBox.includeInLayout =( !isOpening && isOpen ) ;
                    var b : Boolean = false;

                    if( data.@buttonsVisible != null )
                        b = data.@buttonsVisible == "true";

                    buttonBox.visible = buttonBox.includeInLayout = b;

                    if( buttonBox.visible )
                    {
                        buttonBox.y     = measuredHeight;
                        measuredHeight += buttonBox.measuredHeight;
                    }
                }
            }

            override protected function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void 
            {
                super.updateDisplayList( unscaledWidth, unscaledHeight );

                if( buttonBox != null )
                {
                    buttonBox.x = 40;
                    buttonBox.setActualSize( unscaledWidth - buttonBox.x, unscaledHeight );
                }
            }

        ]]>
    </fx:Script>
</mx:TreeItemRenderer>

The application code is as follow :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Tree x="289" y="0" width="377" height="599" labelField="@label" itemRenderer="iRR"  variableRowHeight="true">
    <mx:dataProvider>
        <fx:XMLList xmlns="">
            <folder state="unchecked" label="Marketing Collateral" isBranch="true" >
                <folder state="unchecked" isBranch="true" label="Media, PR, and Communications" >
                    <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" />
                    <folder state="unchecked" isBranch="false" label="Articles Reprints" />
                    <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" />
                    <folder state="unchecked" isBranch="false" label="Press Kits" />
                    <folder state="unchecked" isBranch="false" label="Press Releases" />
                    <folder state="unchecked" isBranch="false" label="Quick Hits" />
                    <folder state="unchecked" isBranch="false" label="Rep Talking Points" />
                    <folder state="unchecked" isBranch="false" label="Special Updates" />
                    <folder state="unchecked" isBranch="false" label="White Papers" />
                    <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" />
                    <folder state="unchecked" isBranch="false" label="Articles Reprints" />
                    <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" />
                    <folder state="unchecked" isBranch="false" label="Press Kits" />
                    <folder state="unchecked" isBranch="false" label="Press Releases" />
                    <folder state="unchecked" isBranch="false" label="Quick Hits" />
                    <folder state="unchecked" isBranch="false" label="Rep Talking Points" />
                    <folder state="unchecked" isBranch="false" label="Special Updates" />
                    <folder state="unchecked" isBranch="false" label="White Papers" />
                    <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" />
                    <folder state="unchecked" isBranch="false" label="Articles Reprints" />
                    <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" />
                    <folder state="unchecked" isBranch="false" label="Press Kits" />
                    <folder state="unchecked" isBranch="false" label="Press Releases" />
                    <folder state="unchecked" isBranch="false" label="Quick Hits" />
                    <folder state="unchecked" isBranch="false" label="Rep Talking Points" />
                    <folder state="unchecked" isBranch="false" label="Special Updates" />
                    <folder state="unchecked" isBranch="false" label="White Papers" />
                    <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" />
                    <folder state="unchecked" isBranch="false" label="Articles Reprints" />
                    <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" />
                    <folder state="unchecked" isBranch="false" label="Press Kits" />
                    <folder state="unchecked" isBranch="false" label="Press Releases" />
                    <folder state="unchecked" isBranch="false" label="Quick Hits" />
                    <folder state="unchecked" isBranch="false" label="Rep Talking Points" />
                    <folder state="unchecked" isBranch="false" label="Special Updates" />
                    <folder state="unchecked" isBranch="false" label="White Papers" />
                </folder>
                <folder  state="unchecked" isBranch="true" label="Forms and Applications" >
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                </folder>
                <folder  state="unchecked" isBranch="true" label="Forms and Applications" >
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                </folder>
                <folder  state="unchecked" isBranch="true" label="Forms and Applications" >
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                    <folder state="unchecked" isBranch="false" label="Applications" />
                    <folder state="unchecked" isBranch="false" label="Forms" />
                </folder>
            </folder>
        </fx:XMLList>
    </mx:dataProvider>
    </mx:Tree>
</s:Application>
  • The code basically works for a bit but after a few items been opened - it fail, and scrolling becaming buggy. Please help.

Solution

  • Try Spark Tree, it's based on Spark List and is free of all the MX Tree bugs.