PDA

View Full Version : [CLOSED][3.??] GridPanel not sized/resized correctly in vbox layout



BlueCamel
9 Dec 2009, 12:47 AM
I'm using Firefox 3.5.5 on Linux with SVN trunk.

I'm attempting to build a layout where a panel will have multiple items in it. I've simplified the test case as follows.

The top item will be fixed text in a container and the second item will be a grid panel. The grid panel is expected to fill the remaining browser area and be sized/resized with the browser window.

My understanding about GridPanels is they manage themselves and they depend on either a height being specified in the GridPanel config or the container managing the height. I'm looking to have the container manage the height but have run into two failures.

The following code shows my first attempt by placing the GridPanel inside a container with a fit layout. See the screenshot attached titled 'layout-fit.png' for the results.



var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am']
];

var columns = [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
];

var store = {
xtype: 'arraystore',
data: myData,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
};

var page = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'panel',
border: false,
id: 'brokenthing',
region: 'center',
items: [{
xtype: 'container',
html: '<p>Item One in a container</p><br />'
},{
xtype: 'container',
layout: 'fit',
items: {
xtype: 'grid',
columns: columns,
store: store,
autoExpandColumn: 'company'
}
}]
}]
});
The second attempt was to use a vbox to manage the layout and apply a flex:1 to the item holding the GridPanel. This works until the browser window is resized. It's also quite slow on the resize performance compared to other layouts, but I haven't been able to quantify it yet. See the two screenshots titled vbox.png and vbox-resize.png.



var page = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'panel',
layout: 'vbox',
border: false,
id: 'brokenthing',
region: 'center',
items: [{
xtype: 'container',
html: '<p>Item One in a container</p><br />'
},{
xtype: 'grid',
flex: 1,
columns: columns,
store: store,
autoExpandColumn: 'company'
}]
}]
});
17678 17679 17680

Animal
9 Dec 2009, 12:56 AM
It looks to me like it's working. It's fitting the available height.

Animal
9 Dec 2009, 12:56 AM
It will be a little slower than necessary because you are overnesting. You have a border layout containing the vbox, instead of just a vbox!

BlueCamel
9 Dec 2009, 6:30 AM
It looks to me like it's working. It's fitting the available height.

I should have used a red marker. Please take a look at this updated image from the first post. This happens after resize when using a vbox layout.

17685

jay@moduscreate.com
9 Dec 2009, 6:49 AM
Here is a tip: You don't need to use the border layout with a viewport if you're just going to nest a panel (container) that just nests other components.

jay@moduscreate.com
9 Dec 2009, 6:56 AM
This is a bug with your implementation, which i do not agree with, but fixed



var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am']
];

var columns = [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
];

var store = {
xtype: 'arraystore',
data: myData,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
};

var page = new Ext.Viewport({
layout: 'border',
items: [{
id: 'brokenthing',
region: 'center',
layout : 'vbox',
layoutConfig : { align : 'stretch' },
items: [{
xtype: 'container',
html: '<p>Item One in a container</p><br />'
},{
xtype: 'grid',
columns: columns,
store: store,
viewConfig : {forceFit : true},
flex : 1,
autoExpandColumn: 'company'

}]
}]
});

Marking as "closed"

jay@moduscreate.com
9 Dec 2009, 6:57 AM
One more thing, if you want to learn more about the layouts and the framework, Ext JS in Action is a great resource.

BlueCamel
9 Dec 2009, 6:57 AM
Here is a tip: You don't need to use the border layout with a viewport if you're just going to nest a panel (container) that just nests other components.

That's true, but for this test case I simplified an app design. In reality I'm using a border layout with a view port to hold the application North Panel and Center Panel. The Center Panel is a card layout that changes based on selections from the North Panel.

However, given this architecture, it may not be a good choice. Each card panel has it's own layout some times with multiple components on it. The result becomes Viewport (borderlayout) -> Component (cardlayout) -> [item1, item2, itemN].

I think this tends to nest too deep based on the extjs resize performance I've seen. Likely I'll have to rethink this strategy to have the North Panel add and remove components from the Center Panel as needed.

BlueCamel
9 Dec 2009, 7:03 AM
One more thing, if you want to learn more about the layouts and the framework, Ext JS in Action is a great resource.

Thank you Jay. Sorry about the bogus report.

jay@moduscreate.com
9 Dec 2009, 7:11 AM
No need to apologize. we are all human dude. I submitted a bogus report the other day and felt really stupid :P

BlueCamel
9 Dec 2009, 7:24 AM
No need to apologize. we are all human dude. I submitted a bogus report the other day and felt really stupid :P

It was a very casual 'sorry' ;)

Hey, if I make the following change to what you posted the grid no longer resizes correctly. If the window is resized to the point the grid needs a scrollbar eventually the scrollbar gets cut off.

The idea was to have only the grid stretched and let the other components remain unstretched. Is the align attribute of a vbox/hbox layout not valid inside the item config? I thought this would get passed up to the container with the vbox layout and apply to only that item.



var page = new Ext.Viewport({
layout: 'border',
items: [{
id: 'brokenthing',
region: 'center',
layout : 'vbox',
layoutConfig : { align : 'stretch' },
items: [{
xtype: 'container',
html: '<p>Item One in a container</p><br />'
},{
xtype: 'grid',
columns: columns,
store: store,
viewConfig : {forceFit : true},
flex : 1,
align: 'stretch',
autoExpandColumn: 'company'

}]
}]
});

jay@moduscreate.com
9 Dec 2009, 7:31 AM
layoutconfig is meant to pass global layout configurations.

Unlike flex, align is not meant to be set on the child item.

BlueCamel
9 Dec 2009, 7:51 AM
layoutconfig is meant to pass global layout configurations.

Unlike flex, align is not meant to be set on the child item.

Seriously inconvenient! This brings up the point that it's not clear from the Layout docs which items belong in layoutConfig and which can get applied to the items of the component directly.

I'll have to find some other way to handle this. There is a form panel above the grid in my app and I really don't want to see the form panel stretched the same way as the grid.

jay@moduscreate.com
9 Dec 2009, 7:55 AM
The inconvenience is in the lack of understanding, which is a result of inefficient or lacking means of communication on how this stuff work.

My point is, I do acknowledge that there could be improvements in the documentation. Just know that all or most of the client type layout configs are worded like:

"This configuation option is to be applied to child items of the container managed by this layout. Each child item with a flex property will be flexed vertically according to each item's relative flex value compared to the sum of all items with a flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed)."


Btw, I'd like to suggest that you pick up a copy of my book (link below). You will learn a lot very quickly, which will help you be better at what you're doing with Ext JS :)

BlueCamel
9 Dec 2009, 7:58 AM
Btw, I'd like to suggest that you pick up a copy of my book (link below). You will learn a lot very quickly, which will help you be better at what you're doing with Ext JS :)

I'LL BUY IT WHEN IT'S OUT ;) Seriously, Shea's book helped much. I expect yours and the forth coming cookbook to help even more.

jay@moduscreate.com
9 Dec 2009, 8:26 AM
Jorge's cookbook is already out :)