tabs in tabpanel

[iteamsoftware]

Hi.
I have an issue regarding the tabPanel and the child.
I have a tabPanel with some tabs inside. Each tab has a grid on it.
The firts tab it's displayed ok but the others are not.
The load it's like this.
I render the tabPanel.
After that the user enter some criteri into a textfiled outside the tabPanel and after that I reload the stores from each grid from tabPanel to display the data.
the data it's loading ok but the other panels except the firts one don't want do make the layout.
I put also:
deferredRender: false, forceLayout: true,

{%jid%}tabsPanel = new Ext.TabPanel({
resizeTabs: true,
enableTabScroll: true,
minTabWidth: 115,
tabWidth:135,
activeTab:0,
autoDestroy: true,
margins:'0 0 0 0',
height: panelHeight - (Ext.isIE6 ? 105 : 107),
bodyStyle: 'padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;',
deferredRender: false, forceLayout: true,
plain: false,
items:
[
{ title: 'tab1',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
items: [ THE GRID HERE ] },

{ title: 'tab2',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
items: [ THE GRID HERE ] },

{ title: 'tab3',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
items: [ THE GRID HERE ] },

{ title: 'tab4',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
items: [ THE GRID HERE ] }
] });


Please help on this one with a clean and nice solution.
Thank you.

[siva565]

hi...try this

tabsPanel = new Ext.TabPanel({
resizeTabs: true,
enableTabScroll: true,
minTabWidth: 115,
tabWidth:135,
activeTab:0,
autoDestroy: true,
margins:'0 0 0 0',
height: panelHeight - (Ext.isIE6 ? 105 : 107),
bodyStyle: 'padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;',
deferredRender: false, forceLayout: true,
plain: false,
items:
[
{ title: 'tab1',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
html:'<div id="myFirstGrid"></div>'

{ title: 'tab2',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
html:'<div id="mySecondGrid"></div>'

{ title: 'tab3',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
html:'<div id="myThirdGrid"></div>'
},

{ title: 'tab4',
defaultType: 'textfield',
deferredRender: false, forceLayout: true,
html:'<div id="myFourthGrid"></div>'
] });

var grid1 = new Ext.grid.GridPanel({
renderTo: 'myFirstGrid',
//your grid content
});

var grid2 = new Ext.grid.GridPanel({
renderTo: 'mySecondGrid',
//your grid content
});

var grid3 = new Ext.grid.GridPanel({
renderTo: 'myThirdGrid',
//your grid content
});

var grid4 = new Ext.gridGridPanel({
renderTo: 'myFourthGrid',
//your grid content
});