View Full Version : Error recreating grid.Panel after destroying it.

6 Dec 2011, 2:37 PM
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.


Ext.define('test.controller.Users', {
extend: 'Ext.app.Controller',
views: [ 'UsersList' ],
stores: [ 'Users' ],
init: function() {
'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
this.previousView = viewInstance;


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


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?


6 Dec 2011, 11:36 PM
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.

7 Dec 2011, 5:15 AM
Yes, that solve the problem. Thanks a lot skirtle! :)

7 Dec 2011, 11:34 PM
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?

8 Dec 2011, 2:20 AM
Yes, it is version 4.0.7-gpl. I downloaded it again to make sure I was using the last version.