Hi,

I have a problem when I add and remove an entire tree (many times) from a Tree Panel.

Code:
initComponent: function() {
    this.columns = [ {
        xtype: 'treecolumn',
        text: 'value',
        dataIndex: 'text',
        flex: 1,
        menuDisabled: true,
        renderer: function( value, element, record ) {
            return Ext.String.format( '<span style="font-weight: bold">{0}</span>: {1}', record.data['text'], record.data['value'] );
        }
    } ];

    var root = {
        name: 'root',
        text: 'Flat',
        expanded: false
};

    this.store = {
        type: 'tree',
        fields: ['name','value'],
        root: root
    };

    this.callParent( arguments );
}
I add the children:

Code:
var children = createMyChildren();
this.clear();

this.getView().getStore().getRoot().appendChild( children );
this.getView().getStore().getRoot().expand();
The clear() function:

Code:
clear: function() {
    this.getView().getStore().getRoot().collapse();
    this.getView().getStore().getRoot().removeAll();
}
If I remove the expand() and collapse() methods call, at the first iteration the tree is rendered correctly, from the second times the tree (only the tree) is rendered twice, one below the other.

Apparently the store and the HTML is rendered correctly only if the tree is collapsed when I remove/add the children.

What am I doing wrong?