Tabpage content not displayed after selecting it

[mhuibers]

Quick question here:

I created a tabPanel with two tabs:


var tabs = new Ext.TabPanel('tabs1');


tabs.addTab('persons', 'Persons','<div id="persongridcontainer"></div>');
tabs.addTab('documents', 'Documents','<div id="documentgridcontainer"></div>');

tabs.activate('persons');

The content I pass in are divs which are used by the createGrids function.

The output is a nice two tabs tabpanel with a nice grid in the first tab content area. However when I click the second tab it only displays a white area (so no grid) sized to fit the grid that should be visible.

Changing this line of code:

tabs.activate('persons');
to:

tabs.activate('documents');

results in a white area (no grid) on the first tab and a nice grid on the second tab.


So is there something that i'm missing here?

Cheers,

Michiel

[tryanDLS]

1) Why are you passing HTML literals to your function? - that's what DomHelper does
2) Look at the rendered HTML with Firebug - my guess is that you're not rendering what you think you are, and the grids/divs are stepping on each other.

[mhuibers]

Thanks Tim,

What I just did is the following:

Html

<div id="tabs1"></div>
Script

var tabs = new Ext.TabPanel('tabs1');
tabs.addTab('pbody', 'Persons');
tabs.addTab('dbody', 'Documents');
initGrid('pbody',20);
initGrid('dbody',10);
tabs.activate('pbody');

As I said, in this case it displays the first grid in the pbody div but the other grid is still not visible.

my ie dev toolbar shows the following:
http://i9.tinypic.com/2ihtkqg.png

If you expand the table nodes all the data of both grids are there.
But for some reason if you click on the second (documents) tab you won't see the grid. As I said earlier, if you activate the documents tab instead of the persons tab than it is the other way around. If you do not activate any of these tabs none of the grids are visible.

Hope you can help,

Thanks,

Michiel

[mhuibers]

anyone? :?

[Animal]

It could be a problem of the grid container not being sized. Try calling the Grid's autosize method after the tab has been shown.

[mhuibers]

Thanks Nige,

autoSize did the trick. both grids are displayed correctly now.

cheers

Michiel