PDA

View Full Version : Layouts question: how to get gridpanel to have 100% height



helavissa
21 Oct 2010, 7:30 AM
Hi,

I've been trying to solve my problem for 3 days now, help is greatly appreciated.
I have 2 gridpanels, and I put them both in another panel. there will be drag and drop between them and second panel will initially be empty. I want the second panel to stretch all the way down, basically have the same height as the first panel which has autoHeight.



var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'First Grid',
autoHeight : true,
frame: true
});

var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'Second Grid',
height : 200,
frame: true
});

var displayPanel = new Ext.Panel({
layout: 'column',
frame: true,
autoHeight: true,
defaults: { columnWidth:0.5 },
width : 650,
items : [
firstGrid,
secondGrid
]
});

so how can I get second grid to have 100% height? or at least fixed minimum height and then stretch as items gets dropped on it?

Thanks!

lucia_mgv
21 Oct 2010, 7:42 AM
I am new in ExtJs but maybe i can help you....

You can try getting dynamically the height of the first grid panel once rendered:



var h = Ext.get('idFirstGrid').getHeight();


And then set the height of the second one:



Ext.get('idSecondGrid').setHeight(h);


I don't know, maybe is not a correct way but is the only thing I can think about.

Good luck!

Lucía

Animal
21 Oct 2010, 7:52 AM
Use



layout: {
type: 'hbox',
align: 'stretch'
}


In your Container.

And then configure each child grid with flex: 1

helavissa
21 Oct 2010, 10:16 AM
Thanks a lot for the replies. I tried this



var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'First Grid',
autoHeight : true,
frame: true,
flex:1
});

var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
title : 'Second Grid',
frame: true,
flex:1
});

var displayPanel = new Ext.Panel({
autoHeight:true,
layout: {
type: 'hbox',
align: 'stretch'
},
frame: true,
width : 650,
items : [
firstGrid,
secondGrid
]
});

The problem is if I set fixed height of the container then it works(secordGrid stretches all the way), but I want the container to stretch based on height of the firstgrid, and the secordGrid to stretch all the way down. But if set autoHeight to true on the container then nothing gets displayed at all.


lucia_mgv,
I wanted first to try it with your approach, but I don't know when set the height. If I simply put the code after everything, that won't work because items are not loaded yet in the store. I tried attaching listeners to 'afterrender', but that also doesn't work, I don't know why.

Condor
21 Oct 2010, 10:35 AM
hbox layout doesn't work correctly for autoHeight:true containers.

Can't you give your panel a fixed height?

helavissa
21 Oct 2010, 3:45 PM
yea, fixed height is what eventually decided to go with.