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.

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

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:states>
        <s:State name="normal" />            
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
        <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" />
            </s:fill>
        </s:Rect>
        <s:Group id="disclosureGroup">
            <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
        </s:Group>
        <s:BitmapImage source="{treeListData.icon}" />
        <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
    </s:HGroup>
</s:MXTreeItemRenderer>

I think your problem has to do with the fundamentals of how ItemRenderers work.

You have to note that ItemRenderers are recycled, so as you scroll the list no new ItemRenderers are created.

In order to promote this behavior your ItemRenderers have to be strictly bound by their data and any individual changes has to be just as revertible.

Say, if your ItemRenderer changes its background to red if a certain field has a negative numeric value you have to remember that the same ItemRenderer is most likely going to represent a positive value again at some point.

Or to be more specific; having an if-statement that checks for a negative value and changes the background to red is not sufficient unless it's followed by an else statement which changes the background to it's default colour.

Now, I didn't study your code thoroughly but judging by the behavior you describe it would be my best bet. Hope it helps you or someone else.