PDA

View Full Version : Layout problem with grid in first tab



balmac
24 Nov 2010, 8:23 AM
Hi everyone
I have a problem with a grid in a Tabpanel.
If the grid is in the first tab which is automatically loaded with activeTab 0 the height of the panel is not adjusted and the grid doesn't fit in the panel.

If the same grid is in another tab everything works as well as if activeTab 0 is removed and the first tab is only loaded when the tab is activated with a click.

It seems there is a problem with layout on the initial rendering of the tab and the grid.

Sample code below. There are 3 tabs. If one changes the order from c,a,b to a,b,c all works, but i need the grid to be in the first tab. If one removes activeTab 0 all work's with c,a,b too, but the panel should automatically load at start. With the code provided the first tab with the grid is cut off and the grid is not fully visible.

the code for the tabpanel


new Ext.Panel({
items: {
xtype: 'tabpanel',
activeTab: 0,
items: [{title: 'c', items: sampleGrid}, {title: 'a', height: 100}, {title: 'b', height: 200}]

}
})


code for the grid

var sampleGrid = new Ext.grid.GridPanel({
autoHeight: true,
store: [
["one"],
["two"],
["three"],
["for"]
],

colModel: new Ext.grid.ColumnModel({
columns: [
{header: 'sample', width: 110, sortable: true}
]
})
});

Can anyone help?
Thank you

griffiti93
24 Nov 2010, 10:19 AM
"If the panel is within a layout that manages dimensions (fit, border, etc.) then setting autoHeight: true can cause issues with scrolling and will not generally work as expected since the panel will take on the height of its contents rather than the height required by the Ext layout."
GridPanel Documentation (http://archer/ext-3.3.0/docs/?class=Ext.grid.GridPanel)

The autoHeight config option does not work correctly when your grid is inside a container. You need to set the container layout to "fit" like this:



new Ext.Panel({
items: {
xtype: 'tabpanel',
activeTab: 0,
items: [{title: 'c', layout: 'fit', items: sampleGrid}, {title: 'a', height: 100}, {title: 'b', height: 200}]
}
})

Animal
24 Nov 2010, 12:41 PM
No. It's easier than that.

Why WRAP the grid?

And why WRAP the TabPanel?



new Ext.TabPanel({
items: [ sampleGrid, otherTabs... ]
});

balmac
25 Nov 2010, 12:07 AM
@griffiti93 Thanks for your answer. I tried it, but with this the grid is never fully visible, independent of the order of the tabs. Only if i set a "height" to the grid this works, but I need the grid to be as large as its content. What am I doing wrong?

@Animal Thank you too, this is of course only a sample code. I need these wrappings in the application for other features. But even with this wrap removed its not working for me, i.e. the same result as with the wrap.

Animal
25 Nov 2010, 1:05 AM
What other features?

Animal
25 Nov 2010, 1:05 AM
And as mentioned in the documentation autoHeight defeats any height management by a layout. Do not use it.

balmac
25 Nov 2010, 1:41 AM
I understand that autoHeight: true defeats the height managment by the layout. But then I need another idea how to get the grid in full size.

The other features shouldn't be important and maybe you are right, I could probably get it to work without the additional wrap. But as already mentioned it's not working without the wrap either so just assume it isn't there ;)

Animal
25 Nov 2010, 3:00 AM
"full size"? Full size of what?

The TabPanel sizes its child tabs (of which the grid should BE one) to fit exactly within itself.

balmac
25 Nov 2010, 3:19 AM
"full size" means always large enough to hold all rows in the grid, however many there are.
I don't want to set a fixed height to the grid, I need it to dynamically fit that all rows are always visible.

Thank you for your effort - much appreciated

Animal
25 Nov 2010, 4:46 AM
Add it without the completely unnecessary wrapping Panel.

balmac
26 Nov 2010, 7:39 AM
Hi

as said before the wrap is not the problem. This is my current code:

var sampleGrid = new Ext.grid.GridPanel({
title: "Test",
store: [
["one"],
["two"],
["three"],
["for"]
],

colModel: new Ext.grid.ColumnModel({
columns: [
{header: 'sample', width: 110, sortable: true}
]
})
});



new Ext.TabPanel({
activeTab: 0,
items: sampleGrid
})

Not all the rows in the grid are visible - but that's what I need. And I cannot set a fixed height to the grid because the grid should always be large enough to show all rows.

Thanks

Condor
26 Nov 2010, 8:00 AM
You could make both the grid and the tabpanel autoHeight:true, but that also disables horizontal scrolling.

This is something that you just can't do very well with Ext (it's a limitiation of current browsers).