PDA

View Full Version : Need Help In Combining GridPanel



kresnandya
23 Nov 2007, 1:13 AM
hi, i have a problem in creating a window with severals GridPanel :

//create the panel
var grid1 = new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
])
});

var grid2 = new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
])
});

// and another two gridPanel w/ the same constructor
// then we add into window
MyDesktop.TestWindow = Ext.extend(Ext.app.Module, {
id: 'test-win',
init: function(){
this.launcher = {
text: 'Test Window',
iconCls: 'icon-grid',
handler: this.createWindow,
scope: this
}
},

createWindow: function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('test-win');
if (!win) {
win = desktop.createWindow({
id: 'test-win',
title: 'Test Window',
width: 740,
height: 480,
iconCls: 'icon-grid',
shim: false,
animCollapse: false,
constrainHeader: true,
layout: 'fit',
items: [grid1] [grid2] [grid3] [grid4],
});
}
win.show();
}
});

it wont work it says : [grid1] has no properties.
please someone help me, or maybe i use a wrong method/constructor ? well i'm kinda new in ExtJS, just try to use it a few days ago.

I've attached image for the layout i want to make.

santosh.rajan
23 Nov 2007, 1:49 AM
Create viewport with column layout with 2 columns, and add two grids to each colums. Altarnatively use table layout with 2 columns and add the grids to the vieport. Remember viewport attaches to the body element. If you dont want that use a Panel or window instead. I dont think you need to extend enything. Look at the examples.