[FIXED][3.0.0] Toolbars don't get destroyed if panel isn't rendered

[wiznia]

This is a tricky bug, I've been trying to find a fix, but I'm not sure exactly how to solve it.
The bug is as follows: if you have a panel that has toolbar/s, and you destroy the panel before it gets rendered (for example inside a tabpanel with deferredRender:true), the toolbar/s don't get destroyed.
Here is a little example of it:

Ext.onReady(function(){

    Ext.QuickTips.init();

    function createTab(title) {
        var store = new Ext.data.JsonStore({
            // store configs
            autoDestroy: true,
            url: 'grid-filter.json',
            remoteSort: false,
            sortInfo: {
                field: 'company',
                direction: 'ASC'
            },
            //storeId: 'myStore',

            // reader configs
            idProperty: 'id',
            root: 'data',
            totalProperty: 'total',
            fields: [{
                name: 'id'
            }, {
                name: 'company'
            }, {
                name: 'price',
                type: 'float'
            }, {
                name: 'date',
                type: 'date',
                dateFormat: 'Y-m-d H:i:s'
            }, {
                name: 'visible',
                type: 'boolean'
            }, {
                name: 'size'
            }]
        });

        /*var createColModel = function (finish, start) {

            var columns = [{
                dataIndex: 'id',
                header: 'Id',
            }, {
                dataIndex: 'company',
                header: 'Company',
                id: 'company',
            }, {
                dataIndex: 'price',
                header: 'Price',
            }, {
                dataIndex: 'size',
                header: 'Size',
            }, {
                dataIndex: 'date',
                header: 'Date',
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
            }, {
                dataIndex: 'visible',
                header: 'Visible',
            }];

            return new Ext.grid.ColumnModel({
                columns: columns.slice(start || 0, finish),
                defaults: {
                    sortable: true
                }
            });
        };

        var grid = new Ext.grid.GridPanel({
            stateful: true,
            stateId: 'grid',
            border: false,
            store: store,
            colModel: createColModel(7),
            loadMask: true,
            autoExpandColumn: 'company',
            listeners: {
                render: {
                    fn: function(){
                        store.load({
                            params: {
                                start: 0,
                                limit: 50
                            }
                        });
                    }
                }
            },
            bbar: new Ext.PagingToolbar({
                store: store,
                pageSize: 50,
            })
        });*/

        var tab = {title: title, items: {xtype: 'panel', tbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 50,
        })}, layout: 'fit'};

        return tab;
    }

    function createWindow() {
        var win = new Ext.Window({
            title: 'Grid Filters Example',
            height: 400,
            width: 700,
            layout: 'fit',
            items: {
                xtype: 'tabpanel',
                activeTab: 0,
                items: [createTab('tab1'), createTab('tab2')]
            }
        }).show();
    }

    var button = new Ext.Button({
        text: 'Show Window',
        handler: function() {
        createWindow();
        },
        renderTo: Ext.getBody()
    });
    createWindow();
});

If you click on both tabs, close the window, and then type in firebug console:
Ext.ComponentMgr.all.length you get 2 components. But, if you open the window, don't click in the second tab and close it, you get 14 (the paging toolbar and its buttons).
I found that the toolbars propery isn't initialized if the panel wasn't rendered. I tried this fix:

Ext.override(Ext.Panel, {
    beforeDestroy: function() {
        if(this.header){
            this.header.removeAllListeners();
            if(this.headerAsText){
                Ext.Element.uncache(this.header.child('span'));
            }
        }
        Ext.Element.uncache(
            this.header,
            this.tbar,
            this.bbar,
            this.footer,
            this.body,
            this.bwrap
        );
        if(this.tools){
            for(var k in this.tools){
                Ext.destroy(this.tools[k]);
            }
        }
        if(this.buttons){
            for(var b in this.buttons){
                Ext.destroy(this.buttons[b]);
            }
        }
        if(this.rendered) {
            Ext.destroy(this.toolbars);
        } else {
            Ext.destroy(this.tbar);
            Ext.destroy(this.bbar);
        }
        Ext.Panel.superclass.beforeDestroy.call(this);
    }
});

But it didn't work, I don't know why tbar and bbar are undefined for the un rendered panel... Besides I don't know if any of the other properties will have the same problem.
Any ideas??

[mjlecomte]

Those properties are deleted when the panel is created and are also added back in only if rendered.

Try a slight tweak to your code:

        if(this.rendered) {
            Ext.destroy(this.toolbars);
        } else {
            Ext.destroy(this.topToolbar, this.bottomToolbar);
        }

The test case can be simplified:

p = new Ext.Panel({
    title:'panel',
    width: 300, height: 300,
    tbar: new Ext.Toolbar({
        items: [
            'yo'
        ]
    })
});

p.destroy();


console.info('after destroy:',Ext.ComponentMgr.all.items.length);

[wiznia]

okay, that was easy.... The solution worked.
Is this going to be corrected in future versions? Are any of the other configuration options affected by the same error?

[evant]

Fixed in SVN.

[wiznia]

Thanks!!