Question

Got an issue, and need your advices

I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it’s date time, I want a datetime editor.
So the fact is, I need to control the “edit control creation/display” just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.

In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.

Thanks and best regards

Answer 1

Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you’re in. In your ColumnModel object you can define something like this below. Note that i’m getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.

editors: { 'default': {xtype:'textfield'},
           texttype: {xtype:'textfield'},
           numbertype: {xtype:'numberfield'},
           combotype: {xtype:'combo'}....... etc. } 

getCellEditor: function(colIndex, rowIndex) {
            var store = Ext.getCmp('mygrid').getStore();
            var field = this.getDataIndex(colIndex);
            var rec = store.getAt(rowIndex);
            var type = rec.get('type');
            if (type in this.editors) {
                return this.editors[type];
            } else {
                return this.editors['default'];
            }

        },