开发者

Custom Edit control inside a ExtJS Editor grid

开发者 https://www.devze.com 2023-01-24 14:00 出处:网络
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开发者_如何学C and valu

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开发者_如何学C 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


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

        },


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))
   }
}


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

selType: 'rowmodel'
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号