View Full Version : Heterogeneous Grid with Grouping

21 Jul 2009, 7:57 AM
Hello all - I am new to the Ext library, and am new to web development in general though I've been a developer in the desktop applications world for almost 10 years.

My specific question this: is it possible to specify column editors at the cell-level? My problem is though I can create a static column model, I need different editors for different cells based on certain values within the data model, though the editors are all located within a single column. What I need is identical to the PropertyGrid control, except that I also need grouping which is why I chose the EditorGridPanel with a GroupingView. I also noticed that PropertyGrid seems to infer the editor type based on the values of what it's bound to; is that correct? If so, that wouldn't work for me either, and I can't really detail why that's the case, but trust that it's not desirable from my perspective either :D

Can anyone tell me what the right approach is here? Is it possible to specify a GroupingView with a PropertyGrid? Or else, is it possible to specify the editor for a given cell in the EditorGridPanel?

21 Jul 2009, 10:15 AM
Bump! Anybody? Bueller?

3 Sep 2009, 7:47 AM
I just wanted to share in case anybody else ever needed to do this, since I didn't receive any help from forum posts.

To summarize, you create a Ext.grid.ColumnModel, store a hash of column editors as a property on the ColumnModel by setting 'editors' in config, and then do a lookup for the particular editor when ColumnModel's 'getCellEditor' event is fired. I'm not sure if that's the the PropertyGrid panel does, but I specifically needed grouping so PropertyGrid wasn't going to work for me. This turns out to work very well for me.


var currentColumnModel = new Ext.grid.ColumnModel({
columns: [
{id: '_Caption', header: 'Name', width: 90, dataIndex: 'Caption', hideable: false},
{id: '_Category', header: 'Category', width: 90, dataIndex: 'Category', hideable: false},
{id: '_Value', header: 'Value', width: 90, dataIndex: 'Value', hideable: false, editable:true}
editors: {
'DATE': new Ext.grid.GridEditor(new Ext.form.DateField({})),'PEOPLE': new Ext.grid.GridEditor(new Ext.form.ComboBox({store: new Ext.data.SimpleStore({id: 0,fields: ['id', 'name'], data: [["83", "Estelleta Warren"]]}), mode: 'local', triggerAction: 'all', valueField: 'id', displayField: 'name', editable: false}))
getCellEditor: function(colIndex, rowIndex) {
var editorList = store.getAt(rowIndex);

if(editorList == null){
alert("Could not get record for row" + rowIndex + "!");

return this.editors['DATE'];
});Now, when hooking the column model up to a GridPanel, it's essential that you set the 'cm' property, not the 'columns' property! This one hung me up for a while, but no more!

Anyway, hope this helps somebody ...