Results 1 to 5 of 5

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    157

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

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

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    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:
    Code:
            if(this.rendered) {
                Ext.destroy(this.toolbars);
            } else {
                Ext.destroy(this.topToolbar, this.bottomToolbar);
            }
    The test case can be simplified:
    Code:
    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);

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    157

    Default

    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?

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Fixed in SVN.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    157

    Default

    Thanks!!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •