How to add Grid to BorderLayout region

[gotcha]

I want to add a grid to a region defined by borderlayout. The borderlayout is going to be opened in a window using Ext2.0 windows. Any ideas ?

[catacaustic]

I can't comment directly on Ext 2.0 (have to settle for 1.1 here) but I'd think that it'd be the same thing.

There's two ways. First way is to add the grid to a div inside a content panel if you want something that's fixed width/height, and add the content panel to the BorderLayout. Second way is to create a GridPanel for that grid, and add the GridPanel to the BorderLayout.

I think that the second option is the best in most cases with a BorderLayout as this lets you have a grid that's 100% width, and can have an auto-width column in it.

[Animal]

It's not the same in Ext 2.0. A Grid is a Panel. There's just the GridPanel class, not Grid.

[catacaustic]

In that case it's easy. Just add the grid to the BorderLayout like any other panel. That should make things a whole lot simpler.

[Gaspar]

Regarding to this topic i have following problem.

I create BorderLayout with 1 ContentPanel and 2 GridPanels.
I need to capture activate event. The only way i could get it is to call activate() method (onload and ontabclick) otherwise it is not get called(!?).


...
var myContentPanel = new Ext.ContentPanel('cp');
myContentPanel.activate = function(panel){
console.log('myContentPanel activate');
// do other useful stuff
};
// Layout
layout = new Ext.BorderLayout.create({
center: {
panels: [myContentPanel, myGridPanel1, myGridPanel2],
}
});
layout.getRegion('center').getActivePanel().activate(cp); // need to call it :(
ContentPanel has activate() method. BUT GridPanels don't (i understand it is based on ContentPanel).
Why? What i'm missing here?
Or is there other solution to get activate event?

[gotcha]

It's not the same in Ext 2.0. A Grid is a Panel. There's just the GridPanel class, not Grid.

Ok, so I tried it this way but getting some JS error.



Ext.grid.dummyData2 = [
['Tim', 'Lukas','Tim.com'],
['Scar', 'Face','Movie.com']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'fname'}
, {name: 'lname', type: 'string'}
, {name: 'address', type: 'string'}
])
, data: Ext.grid.dummyData2
});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer()
, {id:'fname',header: "First Name", width: 120, sortable: false, dataIndex: 'fname'}
, {header: "Last Name", width: 70, sortable: false, dataIndex: 'lname'}
, new Ext.grid.CheckboxSelectionModel()
, new Ext.grid.RowExpander({tpl : new Ext.Template('{address}')})
]);
var sgrid = new Ext.grid.Grid3({
border:false
, ds: ds
, cm: cm
, sm: new Ext.grid.CheckboxSelectionModel()
, expander: new Ext.grid.RowExpander({tpl : new Ext.Template('{address}')})
});

var sFrame = new Ext.BorderLayout.create({
hideOnLayout: false
, west: {
titlebar: true
, split:true
, initialSize: 240
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
, showPin: true
, animate: true
}
, center: {
margins:{left:3,top:3,right:3,bottom:3}
// , panels: [new Ext.GridPanel(grid)] --> This works with Grid from Ext1.1 version
// , panels: [sgrid] --> This doesn't work, with/without having line 'sFrame.add('center', sgrid); '
}
}, win.body);

sgrid.render();

sFrame.beginUpdate();
sFrame.add('center', sgrid);
sFrame.endUpdate();

win.show();


I was able to get Grid from Ext1.1 working with the use of GridPanel but unable to get Grid3 working. Any ideas?

[para]

Ext 1.1


grid = new Ext.grid.EditorGrid('gridField-grid', {ds: blankDS, cm: cm, .........};
layout.add('center', new Ext.GridPanel(grid));


Edit: Sorry, I just realized I didn't help at all. :)

[gotcha]

Any solutions to this problem?

Ok, so I tried it this way but getting some JS error.



Ext.grid.dummyData2 = [
['Tim', 'Lukas','Tim.com'],
['Scar', 'Face','Movie.com']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'fname'}
, {name: 'lname', type: 'string'}
, {name: 'address', type: 'string'}
])
, data: Ext.grid.dummyData2
});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer()
, {id:'fname',header: "First Name", width: 120, sortable: false, dataIndex: 'fname'}
, {header: "Last Name", width: 70, sortable: false, dataIndex: 'lname'}
, new Ext.grid.CheckboxSelectionModel()
, new Ext.grid.RowExpander({tpl : new Ext.Template('{address}')})
]);
var sgrid = new Ext.grid.Grid3({
border:false
, ds: ds
, cm: cm
, sm: new Ext.grid.CheckboxSelectionModel()
, expander: new Ext.grid.RowExpander({tpl : new Ext.Template('{address}')})
});

var sFrame = new Ext.BorderLayout.create({
hideOnLayout: false
, west: {
titlebar: true
, split:true
, initialSize: 240
, minSize: 175
, maxSize: 400
, collapsible: true
, animate: true
, showPin: true
, animate: true
}
, center: {
margins:{left:3,top:3,right:3,bottom:3}
// , panels: [new Ext.GridPanel(grid)] --> This works with Grid from Ext1.1 version
// , panels: [sgrid] --> This doesn't work, with/without having line 'sFrame.add('center', sgrid); '
}
}, win.body);

sgrid.render();

sFrame.beginUpdate();
sFrame.add('center', sgrid);
sFrame.endUpdate();

win.show();


I was able to get Grid from Ext1.1 working with the use of GridPanel but unable to get Grid3 working. Any ideas?