Heterogeneous Grid with Grouping

[carlos.muentes]

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

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?

[carlos.muentes]

Bump! Anybody? Bueller?

[carlos.muentes]

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.

Code:

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 ...