PDA

View Full Version : Layout with nested GridPanels: Grid size not properly computed. What's wrong?



Laurent Mignon
21 Jul 2009, 1:43 AM
Ext version tested:
Ext 3.0.0Adapter used:
extcss used:
only default ext-all.cssBrowser versions tested against:
FF3 (firebug 1.3.0.10 installed)Operating System:
Linux (Ubuntu)Description:
When I try to embed two gridpanel in columnLayout or in hboxLayout,
the size of the girdpanel seems to be not properly computed. I've read lot of
post on this kind of problem I don't understand what's wrong in my sample.
See screenshotTest Case:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Nested grid layout probs</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
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'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

var getStore = function() {
return new Ext.data.ArrayStore({
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 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'}
];

// hbox
var hboxModel = {
region: 'center',
margins:'3 3 3 0',
layout : 'hbox',
defaults:{autoScroll:true},
layoutConfig: {
align:'middle'
},
items:[{
flex: 1,
title: 'Grid Tab',
xtype: 'grid',
layout: 'fit',
store: getStore(),
columns: columns,
stripeRows: true,
autoExpandColumn: 'company',

// Add a listener to load the data only after the grid is rendered:
listeners: {
render: function(){
this.store.loadData(myData);
}
}
},{
flex: 1,
title: 'Grid Tab2',
xtype: 'grid',
layout: 'fit',
store: getStore(),
columns: columns,
stripeRows: true,
autoExpandColumn: 'company',

// Add a listener to load the data only after the grid is rendered:
listeners: {
render: function(){
this.store.loadData(myData);
}
}
}]
};

var columnModel = {
region: 'center',
margins:'3 3 3 0',
layout : 'column',
layoutConfig: {
align:'middle'
},
defaults:{autoScroll:true},
items:[{
autoScroll: true,
columnWidth: 0.5,
title: 'Grid Tab',
xtype: 'grid',
layout: 'fit',
store: getStore(),
columns: columns,
stripeRows: true,
autoExpandColumn: 'company',

// Add a listener to load the data only after the grid is rendered:
listeners: {
render: function(){
this.store.loadData(myData);
},
afterrender: function() {
this.syncSize();
}
}
},{
autoScroll: true,
columnWidth: 0.5,
title: 'Grid Tab2',
xtype: 'grid',
layout: 'fit',
region: 'center',
store: getStore(),
columns: columns,
stripeRows: true,
autoExpandColumn: 'company',

// Add a listener to load the data only after the grid is rendered:
listeners: {
render: function(){
this.store.loadData(myData);
},
afterrender: function() {
this.syncSize();
}
}
}]
};

// Panel for the west
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
closable:true,
width:600,
height:550,
//border:false,
plain:true,
layout: 'border',

//items: [nav, hboxModel]
items: [nav, columnModel]
});

win.show(this);
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:
The posted code works as it if you put it in a file.html into your extjs-3.0.0/src/examples/window/ directoryThe result that was expected:
a navigation panel with a center region divided into two columns each
displaying a well sized gridpanelThe result that occurs instead:
a navigation panel with a center region divided into two columns each
displaying an over sized gridpanelScreenshot or Video:
attachedDebugging already done:
in the my columnModel, if a add listener on 'afterlayout' and look at
layout.container.getHeight(), the height returned is aboud 150px greater
than the available height.Possible fix:
not provided

evant
21 Jul 2009, 2:05 AM
Use hbox layout instead of column layout, with align: 'stretch'

Laurent Mignon
21 Jul 2009, 2:13 AM
Thanks for your help!

evant
21 Jul 2009, 2:34 AM
No problems, your post was clear and you had an easy drop-in test case. You set yourself up to get help!