Custom Edit control inside a ExtJS Editor grid

问题

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

回答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'];
            }

        },

回答2:

In the configuration section of your editorgrid, you will need to define your custom editors:

{
  xtype: 'editorgrid',
  id   : 'mygridID',
  stripeRows: true,
  ...
  ...
  ,customEditors :  {
    //configs go here or pre-define the configs prior to this
     'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),

   //configs go here or pre-define the configs prior to this
     'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
   }
}

回答3:

use this grid config - in order to select whole rows:

selType: 'rowmodel'

来源：https://stackoverflow.com/questions/4165012/custom-edit-control-inside-a-extjs-editor-grid

标签

extjs