PDA

View Full Version : Does forcefit viewconfig work with layout table?



rahst12
5 Apr 2012, 7:43 AM
I'm trying to get a grid to resize with the browser as it changes.. I found the viewConfig property "forceFit=true" which accomplishes this for only the layouts: fit, auto. If you place that panel with the layout fit into another panel with a layout of "table", the forceFit no longer keeps the grid resizing as the browser size changes.

Any ideas out there to get the forceFit of grids to work in table?

Thanks

scottmartin
5 Apr 2012, 9:14 AM
Have a look at the following example:




<body>
<div id="gridDiv" style="padding:30px;"></div>
</body>

// sample static data for the store
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'],
['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']
];

Company = Ext.extend(Ext.data.Model, {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
idProperty: 'company'
});

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: Company,
data: myData
});

Ext.onReady(function(){
var grid = Ext.create('Ext.grid.Panel', {
store: store,
multiSelect: true,
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
height: 350,
// width: 600,
title: 'Array Grid',
renderTo: 'gridDiv',
viewConfig: {
stripeRows: true
//enableTextSelection: true
}
});

// track browser resize
Ext.EventManager.onWindowResize(grid.doLayout, grid);
});


Regards,
Scott.