PDA

View Full Version : Adding a new GridPanel to a ColumnLayout



dougbieber
29 Oct 2010, 12:38 PM
This one is driving me crazy, but I cannot seem to find an answer on the forums or in examples....

How do I dynamically add a new GridPanel to a parent panel using a column layout?

Here is how I build the initial Panel (containing 7 GridPanels)...


grid0=createGrid(store0,'CSI');
grid1=createGrid(store1,'Ownership (80 of 105)');
grid2=createGrid(store2,'Staff (90 of 125)');
grid3=createGrid(store3,'Service & Parts (105 of 170)');
grid4=createGrid(store4,'Brand (50 of 100)');
grid5=createGrid(store5,'Bonus Points (10 of 100)');
grid6=createGrid(store6,'Specialist TBA');


scorePanel = new Ext.Panel({
renderTo: 'panelDiv',
width : '100%',
layout:'column',
items:[{
columnWidth: 1.0,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[grid0,grid1,grid2,grid3,grid4,grid5,grid6]
}]
});

At some point users click various buttons and I want to dynamically removeAll panels and then add 2 of them back.
I tried this code, but it doesn't work:


scorePanel.removeAll(true);
var g0=createGrid(store0,'CSI');
var subPanel=scorePanel.add({
columnWidth: 1.0,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
}).show();
subPanel.add(g0).show;
subPanel.show();
scorePanel.show();


The code successfully removes the original panels, but then fails to add the new one (containing new g0). So I just get a blank screen!

Any suggestions?

dougbieber
29 Oct 2010, 1:53 PM
After much trial and error, the resolution is to add:


scorePanel.doLayout();