PDA

View Full Version : Making Gridheight to fit tabpanel



extshrek
22 Dec 2009, 10:45 PM
Hi

I am trying to maximise a grid inside a tabpanel. I am new to extjs and can someone please help to identify what am I not doing/doing wrong.

Thanks


function simpleGrid() {
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']];

// 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'
}]
});
// manually load local data
store.loadData(myData);
// create the Grid
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,
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), dataIndex: 'lastChange'
}], layout: 'fit', title: 'Array Grid'
});
return grid;
};

Ext.BLANK_IMAGE_URL = '/js/ext-3.1.0/resources/images/default/s.gif';
// Ext.lib.Ajax.defaultPostHeader = 'application/json';
Ext.onReady(function() {
Ext.QuickTips.init();
var tabPanel = new Ext.TabPanel({
id: 'FormPanel',
activeTab: 1,
renderTo: Ext.getBody(),
items: [{
title: 'Search'
},
{
title: 'Browse',
id: 'gd',
layout: 'fit'
},
{
title: 'Edit',
items: [simpleGrid()]
}]
});
})

Animal
23 Dec 2009, 1:31 AM
Add the GridPanel to the TabPanel.

BTW, do a forum search for "add the gridpanel to the tabpanel".

extshrek
23 Dec 2009, 5:42 PM
I have already added the gridpanel to the Tab. look at the part of the code(SimpleGrid()). Even the Tabpanel itself doesn't maximise to 100%.

var tabPanel = new Ext.TabPanel({
id: 'FormPanel',
activeTab: 1,
renderTo: Ext.getBody(),
items: [{
title: 'Search'
},
{
title: 'Browse',
id: 'gd',
layout: 'fit'
},
{
title: 'Edit',
items: [simpleGrid()]
}]
});

extshrek
23 Dec 2009, 6:04 PM
Please ignore. I got it fixed using autoWidth and autoHeight.
Thanks Animal for your help.