Пользовательский элемент управления Edit в сетке редактора ExtJS

Question

Возникла проблема, и вам нужны советы

Я только начал писать сетку редактора. (На самом деле я буду использовать эту сетку в качестве редактора поискового фильтра, то есть столбцы с именем критерия, операторами и значениями). Теперь для поля значения я хочу иметь разные элементы управления для разных строк. Например, когда типом критерия является строка, я хочу отобразить текстовое поле, когда это время даты, мне нужен редактор даты и времени. Факт в том, что мне нужно управлять «созданием / отображением элемента редактирования» непосредственно перед началом редактирования. и это должно быть различным среди рядов. В отличие от найденных примеров, которые исправлены для столбцов.

Чтобы реализовать это, не могли бы вы, ребята, предложить шаги, которые мне нужно сделать? Я, наверное, смогу понять, если кто-нибудь из вас может указать мне путь.

Спасибо и наилучшими пожеланиями

Answer 1

На самом деле вы можете легко сделать это, динамически возвращая различные редакторы и рендеры в зависимости от того, в каком столбце вы находитесь. В вашем объекте ColumnModel вы можете определить что-то вроде этого ниже. Обратите внимание, что я получаю свойство типа каждой записи, чтобы определить ее тип. У меня есть объект, содержащий все мои разные типы редакторов, и то же самое для средств визуализации, а затем на основе типа я выдает другой редактор или средство визуализации для этой ячейки.

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

        },

Answer 2

используйте эту конфигурацию сетки - чтобы выбрать целые строки:

selType: 'rowmodel'

Answer 3

В разделе конфигурации вашей редактирующей сетки вам необходимо определить пользовательских редакторов:

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