Error recreating grid.Panel after destroying it.

[sergionk]

Hello everyone,

I'm trying to make a menu with buttons. When a user clicks on them, each button displays a different view, one at a time (i.e., there won't be two or more panels in the same screen). Every view is a grid.Panel.

There may be a lot of views, so I would like to destroy them when they are not visible. I want to avoid too many instances alive if the user opens too many views. So, when the user clicks on a button, I destroy the previous view and instantiate the new one. But an error happens when I try to reopen a view ("me.dom is undefined" at "me.dom.style.height = me.addUnits(height) (ext-debug.js:14571)").

I could reproduce the error in the attached code.

test/app/controller/Users.s:


Ext.define('test.controller.Users', {
extend: 'Ext.app.Controller',
views: [ 'UsersList' ],
stores: [ 'Users' ],
init: function() {
this.control({
'viewport > panel > toolbar > button[action=showUsers]' : {
click: this.showUsers
}
});
},

previousView: null,
showUsers: function(button) {
this.showView('userslist', button.up('panel'));
},
showView: function(view, panel) {
if (this.previousView) {
panel.remove(this.previousView); // destroy previous view
}
var viewInstance = Ext.widget(view); // instantiate the new one
panel.add(viewInstance);
this.previousView = viewInstance;
}
});


test/app/view/UsersList.js:


Ext.define('test.view.UsersList', {
extend: 'Ext.grid.Panel',
alias: 'widget.userslist',
store: 'Users',
height: '100%',
width: '100%',
title: 'List of users',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1
}],
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: 'Users',
displayInfo: true,
}],
}); // Users


test/app.js:


Ext.application({
name: 'test',
controllers: ['Users'],

launch: function() {
Ext.create('Ext.container.Viewport', {
height: '100%',
width: '100%',
items: [{
xtype: 'panel',
height: '100%',
width: '100%',
autoDestroy: true,
lbar: [{
xtype: 'button',
text: 'Users',
action: 'showUsers'
}],
}],
}); // Viewport
}
});


What am I doing wrong? Or should I just hide the components with no worries?

Thanks!

[skirtle]

I've seen a similar problem specifying dockedItems like this. Try switching it to a bbar (as a single item, not an array) or moving the dockedItems config into an initComponent.

Choosing between hiding and destroying isn't as simple as it seems. Hiding will preserve state, such as scrollbar positions and column reordering. Destroying resets that.

[sergionk]

Yes, that solve the problem. Thanks a lot skirtle! :)

[skirtle]

I've just been doing a little more digging into this and it seems that the problem with dockedItems exists in 4.0.2a but was fixed by 4.0.7. Could you confirm that you're using an older version?

[sergionk]

Yes, it is version 4.0.7-gpl. I downloaded it again to make sure I was using the last version.