View Full Version : attach a grid to a tab

17 Apr 2007, 6:32 AM
Hi there

How can I attach a grid to a tab?

kind of ...

var tabs1 = new Ext.TabPanel('tabs1');
// tabPrintMaterial
var tabPrintMaterial = tabs1.addTab('print-material', "Print Material");
tabPrintMaterial.on('load', Project.loadGrid('Print Material Tabe', tabPrintMaterial));


loadGrid : function(grid, element){

var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}

var grid = new Ext.grid.Grid('print-material', {ds: ds, cm: colModel});

the code above does not work. I'm shure there is a much simpler way to render a grid within a tab, but how?

Thanks for the help.


17 Apr 2007, 6:48 AM
'Does not work' does not tell us much. Do you have a div with id 'printed-material'? Per the doc, did you give the container size dimensions and not make it display:none?

17 Apr 2007, 6:53 AM
well, there is no javascript error.
As you see above I create a tab with:
var tabPrintMaterial = tabs1.addTab('print-material', "Print Material");

And there is now style or something added.

Hmm, do I need to add a div to the tab, and then add the grid to the div. That could work!
I'll check.


17 Apr 2007, 6:55 AM
no it does not work with the above idea.

Actually it's quite simple what I want to do. Just add a grid into a tab.

But how?

17 Apr 2007, 7:22 AM
it works in IE7 with

element.setContent('<div id="gridintab" style="display:block;width:100%;height:200px"></div>', true);
var grid = new Ext.grid.Grid('gridintab', {ds: ds, cm: colModel});

but not in Firefox.