PDA

View Full Version : fit gridpanel into column layout



kerocs
21 Jul 2010, 11:34 PM
I would like to fit a gridpanel into a column layout.

here's my code, I've tested it in 3.0.0 and 3.1.1 and 3.2.1

var HomePageGridBlog = new Ext.grid.GridPanel({
title : 'BLOG',
border : true,
store : store,
colModel : createColModel(2),
loadMask : true,
forcefit : true,
autoExpandColumn: 'titel',
listeners : {
render: {
fn: function(){
store.load({
params: {
start: 0,
limit: 50
}
});
}
}
}
});

var panelUpperHome = new Ext.Panel({
id : 'myLowerHome',
layout : 'column',
bodyStyle : 'background-color: #FE9900',
items : [{
columnWidth : 0.37,
layout :'fit',
bodyStyle : 'padding: 10 20 5 20;border:5;background-color: #009900',
items : [HomePageGridBlog]
}, {
columnWidth : 0.37,
layout :'fit',
bodyStyle : 'padding: 10 20 5 20;border:0; background-color: #FE9900',
items : [HomePageGridCalendar]
}, {
columnWidth : 0.26,
layout :'fit',
bodyStyle : 'padding: 10 10 5 20;border:0; background-color: #FE9900',
items : [panelRemarks, panelEvents]
}]
});

var viewportBrowser = new Ext.Viewport({
layout : 'fit',
renderTo : Ext.getBody(),
items : [panelUpperHome],
style : {
backgroundColor : '#4660AA'
}
});

You can find the page at www.bcat.be/johan.html

Condor
21 Jul 2010, 11:53 PM
1. Your layout is overnested. The viewport can be layout:'column' and the grid can be one of the columns. No need for the extra 2 panels.
2. layout:'column' doesn't set the height of it's children. You want the grid to be stretched, so I recommend using a hbox layout instead.

kerocs
22 Jul 2010, 12:27 AM
Hi Condor, tx for your quick reply

1. The code is part of a even more complicated layout which you can find here : http://www.bcat.be/HomePageNew.html
In fact the viewport contains three panels of which one contains the three columns.
I extracted the problem out of my current layout just to simplify the question.
In real life the viewport has items items : [panelHeader, panelHomepage, panelWebpage].
The website will only show 2 panels, panelheader always and either panelHomepage OR panelWebpage
2. I thought that putting 'fit' into the column would fit the grid into into the layout. Should'nt that work ?. I cannot use a vbox layout because the columns layout is a child of a collapsable panel and collapsing panels in vbox gives positional problems (bug)

Condor
22 Jul 2010, 12:51 AM
layout:'fit' makes the child item fit the parent container. This obviously only works if the parent container has a fixed width and height.

But in your case the layout:'fit' container was an item of the layout:'column' container, which doesn't give it's child items a fixed height.

As I already suggested, use layoutConfig:{type:'hbox',align:'stretch'} instead.

kerocs
22 Jul 2010, 4:01 AM
I changed the panel to hbox as suggested but I'm failing to handle the width of the items now.
The first to panels of hbox are fit into the intial browser width, the third panel is outside of the browser window and can only be seen when I stretch out my browser window to the right.
The stretching of the grid does work vertically !!!

So how do I control the width of the hbox columns ? I need 3 columns being 37-37-26 percent.

var panelUpperHome = new Ext.Panel({
id : 'myLowerHome',
layout : 'hbox',
layoutConfig: {
padding: 10,
pack:'center',
align: 'stretch'
},
bodyStyle : 'background-color: #FE9900',
items : [panelRemarks, HomePageGridBlog, HomePageGridCalendar]
});

PS. Are you sure I will be able to hide the parent home panel ???

Condor
22 Jul 2010, 4:20 AM
HBoxLayout uses either the 'width' or the 'flex' config option of the child items.

In your case you would use flex:37, flex:37 and flex:26 in the three panels.

(and the 'pack' config option is no longer relevant when you specify 'flex')

kerocs
26 Jul 2010, 12:44 PM
Thanks a lot Condor ...

Your suggestions work like a charm. No problems either when the parent panel is being "setVisible(false)"


var panelRemarks = new Ext.Panel({
id : 'myRemarks',
flex : 26,
html : 'blablabla<BR>blablabla<BR>...',
padding : '10 0 5 0',
style : {
padding : '0 0 10 0'
}
});
var panelEvents = new Ext.Panel({
id : 'myEvents',
html : 'blablabla<BR>blablabla<BR>blablabla<BR>blablabla<BR>zaterdag 19/02/2011<BR>blablabla,
padding : '10 0 10 0',
style : {
padding : '10 0 10 0'
}
});

var panelUpperHome = new Ext.Panel({
id : 'myLowerHome',
layout : 'hbox',
layoutConfig: {
padding: 10,
align: 'stretch'
},
bodyStyle : 'background-color: #FE9900',
items : [panelRemarks, HomePageGridBlog, HomePageGridCalendar]
});

var viewportBrowser = new Ext.Viewport({
layout : 'fit',
renderTo : Ext.getBody(),
items : [panelUpperHome],
style : {
backgroundColor : '#4660AA'
}
});