PDA

View Full Version : Dynamic Manipulation of Center Region



djfiii
8 Feb 2010, 8:33 AM
I've watched Jay Garcia's videos on the viewport layout and containers, and have a solid mockup working, where my initial load center region has a toolbar, but I'm having trouble keeping the toolbar when removing the content, i.e. they both get destroyed. Here is my initial center config:


{
region : 'center',
xtype : 'container',
autoEl : {},
layout : 'fit',
id : 'centerRegion',
margins: '5 5 5 5',
items : {
title : 'Fake Center Region',
id : 'centerPanel',
tbar : tb,
html : 'default page'
}
}



tb has a few buttons. One is users, with 'handler : users' which is defined as follows:




var users = function(){
cr = Ext.getCmp('centerRegion');
cp = Ext.getCmp('centerPanel');
tb = Ext.getCmp('toolbar');
cr.remove(cp);

cr.add({
xtype : 'panel',
title : 'User Panel',
id : 'centerPanel',
items : [tb],
html : 'user page'
});
cr.doLayout();
}


what I'm trying to do is destroy the content of centerPanel, but keeping a reference to the toolbar so I can pop it into the panel I'm creating immediately after. I'm getting a reference to tb, and it's there both before and after the call to remove, but it's not rendering in the new panel. Any ideas?

mystix
8 Feb 2010, 11:15 AM
tb belongs to the centerPanel. if you remove the centerPanel, tb is automatically destroyed along with it.

not sure why you're still seeing the tb reference after you remove centerPanel though.

djfiii
8 Feb 2010, 11:42 AM
Thanks for the reply. I understand what is happening. Can you suggest a way to avoid that, given the code I posted? A different approach perhaps? I've tried passing false as the second argument to the remove method, and that keeps the elements in the dom, but my rendering issue is the same.

mystix
8 Feb 2010, 11:51 AM
this screencast from @jay should give you something to work with (iirc):
http://tdg-i.com/58/ext-js-screencast-005-containers-add-and-remove

djfiii
8 Feb 2010, 11:58 AM
Cool thanks - I've only watched his #009 webcast. I'll check out all of them since they seem to be very relevant to what I'm trying to do.

That aside, I've figured out a solution to my problem. I basically just nested another panel so the tbar is not part of the one that gets destroyed. In case anyone stumbles on this same issue, here's my updated code:



{
region : 'center',
xtype : 'container',
autoEl : {},
layout : 'fit',
id : 'centerRegion',
margins: '5 5 5 5',
items : [{
title : 'Default Page',
id : 'centerPanel',
tbar : tb,
items : [{
id : 'centerPanelContent',
html : 'default page',
border : false
}]
}]
}


then when the users button from tb is clicked, my users() function fires, which is as follows:



var users = function(){
cp = Ext.getCmp('centerPanel');
cpc = Ext.getCmp('centerPanelContent');
cp.remove(cpc);

cp.add({
xtype : 'panel',
border : false,
id : 'centerPanelContent',
html : 'user page'
});

cp.doLayout();
}

mystix
8 Feb 2010, 12:04 PM
that's a little bit of overhead there.

watch the screencast i suggested, then update your code again when you see the light :).

djfiii
8 Feb 2010, 12:17 PM
heh, willdo :) thanks again.

djfiii
8 Feb 2010, 12:51 PM
actually, now that I went back, I realized I had watched that one. That's where I picked up on passing the false boolean as the second argument of the remove method in order to preserve the object that you intend to place into another container. Unfortunately, that didn't solve my issue, i.e. the toolbar was not rendering in the new panel, even though the object wasn't destroyed. So unless anyone has a cleaner suggestion, the code I have above works and I guess that's what I'll have to stick with :)

mystix
10 Feb 2010, 10:33 AM
ahhh... just realised the Panel doesn't contain the Toolbar (in the same way a Container contains child Components) -- the Panel merely owns the toolbar, so you can't use jay's technique for dynamically moving child components from one Container to another Container. you can stick with your method -- for now ;) -- until something better comes along.

note: check out the Ext.Panel#beforeDestroy() method to see what i mean.