View Full Version : Replace Panel with Another Panel

19 Oct 2012, 6:58 AM
I'm a newbie to ExtJS and trying to build a function that will replace one panel with another. I've read through the documentation and tried various solutions but no luck so far. I can remove the old panel but can't seem to find a way to get the parent container reference. (I assume this will be needed to create the new panel in the same spot)

function replacePanel(existingPanel, newPanel) {
var myPanel = Ext.get(existingPanel);

// do I need to get the parent info here? so I'll know where to place the replacement?
var myParent = Ext.get(panel).findParentByType('container');
// add the new panel to parent in same place

var newPanel = Ext.panel.Panel(
title: 'Replacement Panel Title',
html: 'replacement panel'

replacePanel('oldPanel', newPanel);

22 Oct 2012, 9:21 PM
Usually you would obtain a reference to the parent Panel (as you're already doing it) and then calling parentPanel.removeAll() - which will remove al child items of that parent Panel. After that you can than call parentPanel.add(newPanel).


22 Oct 2012, 9:46 PM
Ext.get is for grabbing elements, not components. There's also Ext.getCmp but I'd avoid that if I were you, it's generally considered bad practice grabbing components by id.

To get the parent from the child the easiest way is:

var parent = child.ownerCt;

For anything more advanced you could use a component query but in this case you really don't need any more than that.

To remove you could use either:




What you're doing in your current code is just removing the DOM element for your panel, you aren't removing the panel itself. This really isn't what you want.

22 Oct 2012, 9:49 PM
You're missing the new keyword in this line too:

var newPanel = Ext.panel.Panel(

Either that or swap to Ext.create or Ext.widget.

23 Oct 2012, 1:51 PM
I'm a bit of a newbie at ExtJS as well, but I wonder if you can get a reference to the existing panel and just replace it, like the following, which assumes you already have a reference to the existing panel:

myExistingPanelRef = Ext.create('Ext.panel.Panel', {

Like I said, it may be naive of me to suggest this, but if this were Adobe Flex it might be an alternative.

23 Oct 2012, 2:08 PM
@glafrance. You can assign a new panel to a variable but if that panel has been added to a container or rendered to the DOM it won't update those references. It sounds like you're suggesting some kind of pointer-based magic but JavaScript variables don't work that way. I highly recommend you dig out a decent JavaScript primer and give it a read, I suspect you're relying too heavily on your knowledge of other languages. It's a common problem amongst ExtJS newbies but you'll get lost very quickly if your understanding of JavaScript isn't solid.