PDA

View Full Version : Grids not rendering properly in tabs



codereflection
16 Jul 2009, 7:53 AM
I am having an issue with scrollable grids rendered inside tabs. When a grid is added to a tab that is not visible, the scroll bars do not show up nor do the columns size properly in the grid until either a column is sorted, a column is moved, or page change (when using paging) occurs.

Example code below. I've taken the array example, made three grids out of the data, and added each grid to it's own tab. Notice that when Tab 2 or Tab 3 is made active, the grid does not contain scroll bars nor are the columns properly sized. Then try sorting a column, the grid re-renders and displays properly.

How do I get around this behavior?


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="scripts/ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

<script src="scripts/ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>

<script src="scripts/ExtJS/ext-all-debug.js" type="text/javascript"></script>

<script type="text/javascript">
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']
];


// example of custom renderer function
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// setup tabs
var tabs = new Ext.TabPanel({
renderTo: 'TabContainer',
activeTab: 0,
items: [
{ contentEl: 'tab0', title: 'Tab 1' },
{ contentEl: 'tab1', title: 'Tab 2' },
{ contentEl: 'tab2', title: 'Tab 3'}]
});


// create the Grids
for (var i = 0; i <= 2; i++) {
// create the data store
var store = 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' }
]
});
store.loadData(myData);

var grid = new Ext.grid.GridPanel({
store: store,
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, renderer: change, dataIndex: 'change' },
{ header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange' },
{ header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
],
stripeRows: true,
autoExpandColumn: 'company',
height: 200,
frame: false,
autoHeight: false,
width: 'auto',
title: 'Array Grid ' + (i + 1).toString(),
renderTo: 'grid' + i.toString()
});
}

});


</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div id="TabContainer">
</div>
<div id="tab0" class="x-hide-display" style="position: relative; height: 250px;">
<div id="grid0" style="position: relative; width: 100%; height: 100%; margin: 0 auto;">
</div>
</div>
<div id="tab1" class="x-hide-display" style="position: relative; height: 250px;">
<div id="grid1" style="position: relative; width: 100%; height: 100%; margin: 0 auto;">
</div>
</div>
<div id="tab2" class="x-hide-display" style="position: relative; height: 250px;">
<div id="grid2" style="position: relative; width: 100%; height: 100%; margin: 0 auto;">
</div>
</div>
</div>
</form>
</body>
</html>

CutterBl
16 Jul 2009, 7:58 AM
Try setting an explicit size for your grid width. I think, in defining the width as 'auto', that it automatically sets the viewConfig to a layout of 'fit', which will override all of your column sizing.

codereflection
16 Jul 2009, 8:14 AM
Thanks for the reply.

Unfortunately, setting an explicit width on the grid (width: 800) does not make a difference.