PDA

View Full Version : Correct way to add, remove and replace panel content



leowyatt
17 Nov 2010, 3:53 AM
I've created a 2 column layout panel which contains 2 further panels.

In the first column I have a tree which when a node is selected a form is displayed in the 2nd column. I've got the code working to do this but each time I click one of the nodes the forms double up.

Here is the code for the column panel:


var collectionPanel = new Ext.Panel( {
layout : 'column',
id : 'collectionPanel',
items : [ {
id : 'collectionTree',
columnWidth : 0.3,
xtype : 'panel'
}, {
id : 'collectionFormPanel',
columnWidth : 0.7,
xtype : 'panel'
} ]
});
Here is the code with the click listener in the tree:


var cp = Ext.getCmp('collectionFormPanel');
var ctrContainer = Ext.getCmp('centerRegion');
ctrContainer.remove(cp, false);

cp.add( {
id : 'collectionFormPanel',
items : [ packageForm ]
});

ctrContainer.doLayout();I've attached a screenshot to show what it looks like when I've clicked the package2 option several times.23382

Here is a screenshot of when 2 different nodes have been selected
23383

Screamy
17 Nov 2010, 5:10 AM
Since you're specifying autoDestroy false when removing the panel, you have to hide it:


var cp = Ext.getCmp('collectionFormPanel');
var ctrContainer = Ext.getCmp('centerRegion');
ctrContainer.remove(cp, false);

cp.hide();

cp.add( {
id : 'collectionFormPanel',
items : [ packageForm ]
});
ctrContainer.doLayout();

leowyatt
17 Nov 2010, 5:17 AM
Cheers for the reply Screamy unfortunately I now don't get anything displayed in the panel

Even if I specify autoDestroy as true I still get multiple copies

Screamy
17 Nov 2010, 6:30 AM
I notice you're referencing a 'centerRegion' panel, but I don't see the layout for it anywhere in your code. That may be complicating things.

Regardless, if you're just wanting to dynamically replace the panel identified by id 'collectionFormPanel', do this:



var parentPanel = Ext.getCmp('collectionPanel');
parent.remove('collectionFormPanel');
parent.add('<someNewPanelConfig>')
parent.doLayout();

laurentParis
17 Nov 2010, 6:56 AM
Try this solution


var collectionPanel = new Ext.Panel({
layout: 'column',
renderTo: document.body,
id: 'collectionPanel',
items: [{
id: 'collectionTree',
columnWidth: 0.3,
xtype: 'panel',
html: 'panel1'
},
{
id: 'collectionFormPanel',
columnWidth: 0.7,
xtype: 'panel',
html: 'panel2'
}],
buttons: [{
text: 'test',
handler: function () {
var cp = Ext.getCmp('collectionFormPanel');
var ctrContainer = Ext.getCmp('collectionPanel');
cp.destroy(); // or ctrContainer.remove(cp);
ctrContainer.add({
id: 'collectionFormPanel',
columnWidth: 0.7,
html: 'test'
});
ctrContainer.doLayout();
}
}]
});

leowyatt
17 Nov 2010, 7:29 AM
Cheers for the replies laurentParis and Screamy.

Screamy - unfortunately I'm still getting the duplicated items in the same panel

laurentParis - that worked 'panel2' was replaced with test :) Just going to try it with my own code now

darthwes
17 Nov 2010, 7:58 AM
Get familiar with RemoteComponentPlugin (UX) (http://www.sencha.com/forum/showthread.php?18023-Ext.ux.Plugin.RemoteComponent). It would seem that this plugin (which I have been recomending for about a week, didn't even know it existed until then) solves a great deal of dynamic Ext problems, real time saver. Let me know if this solution is inadequate, I hate posting helpless comments.

matt617
17 Nov 2010, 8:45 AM
FYI adding and removing DOM elements with destroy like that can get very heavy on processor cycles. May want to look into hiding the content and removing the content once it is hidden if you are constantly adding and removing panels. there are several good posts about techniques to avoid heavy DOM manipulation.

leowyatt
18 Nov 2010, 1:22 AM
Cheers Wes I'll look into that plugin. Matt, I'll have a look at dom manipulation. One question though is if I destroy something how can I add it back? If I use .remove(cp, true); I get c.getPositionEl().dom is undefined

I tried to post this yesterday but the forms were up and down a lot.

Using the code from laurentParis and clicking the collections node I see this:

23391

Which is correct. If I click collection point 1 I get the collection point form;

23390

Clicking collections again I loose the add button;

23392

Then clicking collection point 1 again and back to collections I get this blue bar at the bottom which increases with each click.

23394

If I click the package node I get this view

23395

The code for collections node click is;



var cfp = Ext.getCmp('collectionFormPanel');
var cp = Ext.getCmp('collectionPanel');
cp.remove(cfp, false);
cp.add({
id: 'collectionFormPanel',
columnWidth: 0.7,
items : collectionPointGrid
});
cp.doLayout();Collectionpoint1 node:


var cfp = Ext.getCmp('collectionFormPanel');
var cp = Ext.getCmp('collectionPanel');
cp.remove(cfp, false);
cp.add({
id: 'collectionFormPanel',
columnWidth: 0.7,
items : collectionPointForm
});
cp.doLayout();Package1 Node:


var cfp = Ext.getCmp('collectionFormPanel');
var cp = Ext.getCmp('collectionPanel');
cp.remove(cp, false);
cp.add({
id: 'collectionFormPanel',
columnWidth: 0.7,
items : packageForm
});
cp.doLayout();I'm at a loss as to why these keep doubling up. If I look at the view in firebug and inspect the blue var it is a panel that is being added but I'm not sure why.

leowyatt
18 Nov 2010, 1:42 AM
I don't want to speak too soon but it seems if I use cp.hide(); instead of cp.remove(cfp, false);

I just need to figure out why the button disappears from the fbar on the grid

matt617
18 Nov 2010, 11:05 AM
im confused... if you remove something and do not have a reference to it its gone. poof. no more. you need to keep a reference in memory in order to keep the element otherwise garbage collection keeps it up. Since you want to drop and re-add, hide seems like hte better solution. What do you mean the button dispeaars on hide? Is teh button on the panel your hiding? If so thats expected...