PDA

View Full Version : changing grids in a tabpanel: grids only displayed once



robertdbuckley
5 Apr 2011, 12:08 AM
Hi,

I have managed to set up a viewport containing 3 mapPanels which are contained in a tab panel.

With the code below I can start the application and the grids are loaded according to which tab is activated. The problem is that I can only do it once!
If I change from from the first tab to the second tab....and then back to the first tab, the grid in is not activated!?!?

Iīm sure there is a simple explanation...i hope.
Can anyone see it?

The app is here...
http://maps.zgb.de:8080/geoserver/www/testing/wea_tabs.html


var centerTabPanel = new Ext.TabPanel({
id:'centerTabPanel',
region:'center',
width: 800,
activeTab: 0,
items:[mapPanel_wea, mapPanel_biogas, mapPanel_wasser]
});

centerTabPanel.items.each(function(tab){

tab.on('activate',function(panel){
if
(panel.id == 'WEA') {
// Ext.Msg.alert('Panel', panel.id + '" tab?');
gridContainer.remove(grid_wasser);
gridContainer.remove(grid_biogas);
gridContainer.add(grid_wea);
gridContainer.doLayout();
}
else
if (panel.id == 'Biogas') {
// Ext.Msg.alert('Panel', panel.id + '" tab?');
gridContainer.remove(grid_wea);
gridContainer.remove(grid_wasser);
gridContainer.add(grid_biogas);
gridContainer.doLayout();
}
else
if (panel.id == 'Wasserkraft') {
// Ext.Msg.alert('Panel', panel.id + '" tab?');
gridContainer.remove(grid_wea);
gridContainer.remove(grid_biogas);
gridContainer.add(grid_wasser);
gridContainer.doLayout();
}
});

});

Thanks for any help,

Robert

Grolubao
5 Apr 2011, 12:22 AM
I would say if you are doing the if's you might just push the activate into each of the panels. Also why are you adding and removing? For that use a card layout with all the panels and then only show the one you want.

robertdbuckley
5 Apr 2011, 12:47 AM
..your wrote..

"I would say if you are doing the if's you might just push the activate into each of the panels"

Can you explain how this would work?

I have never used a card layout before, but if you look at the application I donīt think a card layout would help.

Grolubao
5 Apr 2011, 12:53 AM
..your wrote..

"I would say if you are doing the if's you might just push the activate into each of the panels"

Can you explain how this would work?

I have never used a card layout before, but if you look at the application I donīt think a card layout would help.

What I'm saying is that your gridContainer can have the card layout, then on the activate of each tabPanel you just do

gridContainer.getLayout().setActiveItem('theIdOfThePanelYouAreSelecting')

Grolubao
5 Apr 2011, 1:02 AM
So something like this:

tab.on('activate',function(panel){
if
(panel.id == 'WEA') {
gridContainer.getLayout().setActiveItem(grid_wea);
}
else
if (panel.id == 'Biogas') {
gridContainer.getLayout().setActiveItem(grid_biogas);}
else
if (panel.id == 'Wasserkraft') {
gridContainer.getLayout().setActiveItem(grid_wasser);}
}
});

});

robertdbuckley
5 Apr 2011, 1:16 AM
Hi,

Thanks for the help, but it doesnīt work any different.

var gridContainer = new Ext.Panel({
id:'gridContainer',
region:'west',
width:400,
collapsible: true,
collapseMode: "mini",
autoHeight:true,
items:[grid_wea,grid_biogas,grid_wasser]
});

var centerTabPanel = new Ext.TabPanel({
id:'centerTabPanel',
layout:'card',
// region:'center',
width: 800,
activeTab: 0,
stateId:'TabPanel',
items:[mapPanel_wea, mapPanel_biogas, mapPanel_wasser]
});

centerTabPanel.items.each(function(tab){

tab.on('activate',function(panel){
if
(panel.id == 'WEA') {
// Ext.Msg.alert('Panel', panel.id + '" tab?');
gridContainer.getLayout().setActiveItem(grid_wea);

}
else
if (panel.id == 'Biogas') {
// Ext.Msg.alert('Panel', panel.id + '" tab?');
gridContainer.getLayout().setActiveItem(grid_biogas);

}
else
if (panel.id == 'Wasserkraft') {
// Ext.Msg.alert('Panel', panel.id + '" tab?');
gridContainer.getLayout().setActiveItem(grid_wasser);

}
});

});

Grolubao
5 Apr 2011, 1:19 AM
Please use the CODE tags next time you post the code.

It's not the tabpanel who has the cardlayout, it's the gridcontainer

robertdbuckley
5 Apr 2011, 1:26 AM
http://maps.zgb.de:8080/geoserver/www/testing/wea_card.html


Sorry...it DID work...thanks for your help.

Rob

Grolubao
5 Apr 2011, 1:31 AM
Some more piece of advise:

Your TabPanel should have the center layout and there's no point in defining width or height (it will occupy the whole space)

In your west region you only need to define the width, no autoheigh and stuff like that.

I would recommend using deferredRender (http://dev.sencha.com/deploy/dev/docs/source/CardLayout.html#cfg-Ext.layout.CardLayout-deferredRender) : Boolean in the gridContainer to only render the other cards when you change to them

Enjoy!