View Full Version : TabPanel fit content

19 Jul 2010, 5:49 AM
I have a TabPanel where I add different kind of content, grids, forms, etc... but I have a common problem: when I add, for example a GridPanel, when the grid is loading its content I see the PagingBar at top of the panel, and when the data is loaded, the PagingBar goes to its place (at bottom). I have the same problem with tabbed forms where tabs position is defined as bottom.

The final result is the desired, but when the form or the grid data is loading the effect the user sees is very ugly! How can I avoid this strange effect? I use layout fit for my main tab panel.

19 Jul 2010, 6:55 AM
How did you configure you tabpanel and tabitems?

19 Jul 2010, 7:06 AM
My main tab panel looks like follows:

var desktop = new Ext.TabPanel({
id: 'desktop-tab-panel',
border: false,
enableTabScroll: true,
activeTab: 0,
deferredRender: true,
layoutOnTabChange: true,
frame: true,
resizeTabs: true, // turn on tab resizing
minTabWidth: 150,
tabWidth: 150,
defaults: {
closable: true,
autoScroll: true,
layout: 'fit'

And tab items, for example, a grid I add:

var examplesGrid = new Ext.grid.GridPanel({
id: 'examples-projects-grid',
//title: '<?=_("Example Projects")?>',
store: examplesData,
view: new Ext.grid.GroupingView({
emptyText: '<?=_("There is no available examples")?>',
deferEmptyText: true,
forceFit: true,
//showGroupName: true,
//enableNoGroups: false,
//hideGroupedColumn: true,
showGroupName: false,
enableNoGroups: true,
hideGroupedColumn: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
loadMask: true,
autoHeight: false,
stripeRows: true,
autoexpand: 'ex-prj-desc-col',
plugins: [editor/*,filters*/],
border: false,

columns: [...],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: examplesData,
displayInfo: true,
displayMsg: '<?=_("Displaying examples {0} - {1} of {2}")?>',
emptyMsg: '<?=_("No examples found")?>'

19 Jul 2010, 7:22 AM
Are the TabPanel height and width set by it's container?

19 Jul 2010, 7:32 AM
Or, do you in fact add to the TabPanel, a Panel which contains examplesGrid? Or do you render it? You cunningly conceal this.

19 Jul 2010, 7:35 AM
No. The TabPanel is inside the central region of a ViewPort:

var centralPanel = {
//title: '<?=_("Desktop")?>',
region: 'center',
margins:'0 0 5 0',
layout: 'fit',
border: true,
items: desktop

var mainView = new Ext.ViewPort({
id: id,
renderTo: Ext.getBody(),
layout: 'border',
border: false,
items: [northPanel,southPanel,westPanel,eastPanel,centralPanel]

19 Jul 2010, 7:37 AM
So how does that GridPanel get added? THAT'S what I'm asking. Show that code.

19 Jul 2010, 7:39 AM
My Grid is inside a Panel, and I add this panel to the TabPanel:

var gridInPanel = Ext.Panel({
id: id,
title: '<?=_("Examples: Projects")?>',
layout: 'fit',
items: [examplesGrid]

19 Jul 2010, 7:41 AM

19 Jul 2010, 7:47 AM
I thought you wanted to put the GridPanel into the TabPanel?????

19 Jul 2010, 7:58 AM
I thought too... but when I've reviewed my code I've seen I have the grid inside a panel... and the panel is which I add to the TabPanel. But it should work, because my panel is configured as layout: 'fit'... and my grid too.

Maybe, this could seem "too complicated", but it's more clear when I add a form panel which I directly add the form panel into the tab panel. I have the same "ugly effect"...

19 Jul 2010, 8:00 AM
Yes, the layout: 'fit' will make it size OK. But it is completely pointless wrapping the Grid like that and you should remove it.

19 Jul 2010, 8:04 AM
OK, I'll try to remove the intermediate and unnecessary panel and add the grid directly to the tabpanel (I think I did this because I had problem with the tab title).

But, what about the problem with the form panel?

20 Jul 2010, 12:26 AM
I've removed the intermediate panel and now I'm adding the grid panel directly to the tab panel, and I have the same problem. Remember, my problem isn't that the grid isn't laid out fit to its container, my problem or my question is I see an ugly effect when the grid is being rendering... I see the bottom tool bar at top and when data is loaded the bottom tool bar is placed at bottom correctly.

My question is: can I avoid this ugly effect? I have the same problem if I have a form panel with a bottom tool bar... I would like when I add the grid or form panel to the tab panel and it is showed, the bottom tool bar appears directly at the bottom.

I'm using ExtJS 3.2.1.

20 Jul 2010, 12:29 AM
So there's no actual bug, just an "ugly effect". I can't say I have any problems with ugly effects, so I'm not that bothered.