PDA

View Full Version : Re-adding Panels when using contentEl



danklasson
8 Feb 2013, 2:58 AM
I want the center panels to be swapped out when a user clicks a link. And I also need to load some content into a div element that I later want rendered inside the center panel, which is supposedly done with contentEl. The problem is when I use it and re-add a panel, I get this error message:


Uncaught TypeError: Cannot call method 'removeCls' of null



function switchPanel(active_panel, new_panel) {
var ws = Ext.getCmp('viewport-main');
ws.remove(active_panel);
ws.add(new_panel);
ws.doLayout();
}

function panelHome() {
return Ext.create('Ext.panel.Panel', {
region: 'center',
id: 'panel-home',
contentEl: 'main', // it works with this commented out
autoDestroy: true,
});
}

function panelOverview() {
return Ext.create('Ext.tab.Panel', {
region: 'center',
id: 'panel-overview',
autoDestroy: true,
items: [{
title: 'Foo',
html: '1',
},{
title: 'Bar',
html: "2",
}
]
});
}

var viewport = Ext.create('Ext.Viewport', {
id: 'viewport-main',
layout: 'border',
items: panelHome(),
});

switchPanel('panel-home', panelOverview());
switchPanel('panel-overview', panelHome()); // throws error



What am I doing wrong? Thanks.

evant
8 Feb 2013, 3:07 AM
This is covered in the docs:



This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.

danklasson
8 Feb 2013, 3:10 AM
Exactly. Which is what I want.

The problem is that it's causing an error when re-adding panels.

evant
8 Feb 2013, 3:11 AM
Right, so as it says, it just moves the DOM element inside the panel. Which means when you destroy it, all the stuff inside it goes too. So if you want to keep it you'll need to clone the element.

danklasson
8 Feb 2013, 3:42 AM
Thanks for pointing that out. It works now.