ExtJS 5: Сложные данные сетки - установить значение редактора столбцов

Question

У меня есть "сложные" данные, то есть в моих данных есть ассоциации, и я пытаюсь использовать эти ассоциации в своей таблице. Я создаю столбцы на основе некоторых данных, и поскольку данные вложены в массив, я устанавливаю средство визуализации для каждого столбца... Я также устанавливаю редактор. Рендерер работает просто отлично, но установка значения редактора не работает так, как я думал. Вот мой код (и скрипка):

Ext.application({
  name : 'Fiddle',
  launch : function() {
    Ext.define('Phone', {
      extend: 'Ext.data.Model',
      fields: [
        {name: 'phone', type: 'int'},
        {name: 'type', type: 'string'}
      ]
    });
    Ext.define('Person', {
      extend: 'Ext.data.Model',
      fields: [
        {name: 'name', type: 'string'}
      ],
      hasMany: [
        {associationKey: 'phones', model: 'Phone', name: 'getPhonesStore'}
      ]
    });
    var beforeEdit = function(editor, context, eOpts) {
      var grid = context.grid;
      var record = context.record;
      if (grid && record) {
          var phonesStore = record.getPhonesStore();
          var columns = grid.columns;
          if (columns && phonesStore) {
              for (var i = 1; i < columns.length; i++) {
                  var column = columns[i];
                  if (column) {
                      var editor = column.getEditor();
                      if (editor) {
                          alert(phonesStore.getAt(i - 1).get('phone'));
                          editor.setValue(phonesStore.getAt(i - 1).get('phone'));
                      }
                  }
              }
          }
      }
    };
    Ext.define('MyView', {
      extend: 'Ext.grid.Panel',
      store: Ext.create('Ext.data.Store', {
        model: 'Person',
        proxy: {
          type: 'memory'
        },
        data: [
          {name: 'blah', phones: [{phone: [phone], type: 'Home'}, {phone: [phone], type: 'Cell'}]},
          {name: 'bleh', phones: [{phone: [phone], type: 'Home'}, {phone: [phone], type: 'Cell'}]}
        ]
      }),
      plugins: [
        {ptype: 'rowediting', clicksToEdit: 1, listeners: {beforeedit: beforeEdit}}
      ],
      height: 300,
      width: 400,
      initComponent: function() {
        var store = this.getStore();
        if (store) {
          var firstRecord = store.first();
          if (firstRecord) {
            var phonesStore = firstRecord.getPhonesStore();
            if (phonesStore) {
              var columns = [{
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name',
                editor: {
                  xtype: 'textfield',
                  hideTrigger: true
                }
              }];
              phonesStore.each(function(phoneRec) {
                columns.push({
                  xtype: 'gridcolumn',
                  text: phoneRec.get('type'),
                  renderer: this.phoneRenderer,
                  editor: {
                    xtype: 'numberfield',
                    hideTrigger: true
                  }
                });
              }, this);
              this.columns = columns;
            }
          }
        }
        this.callParent();
      },
      phoneRenderer: function(value, metaData, record, rowIndex, colIndex) {
        return record.getPhonesStore().getAt(colIndex - 1).get('phone');
      }
    });
    Ext.create('MyView', {
      renderTo: Ext.getBody()
    });
  }
});

Всего у меня 3 колонки... Name, Home, а также Cell, Теперь вы можете подумать, почему бы мне не иметь объект Cell и Home вместо phones массив... ну, это не то, что я хочу сделать, так как я не думаю, что это как правильно структурировать эти данные. Во всяком случае, я создаю эти два дополнительных столбца, когда я запускаю свою сетку.

Проблема возникает с редактором, который я установил для столбцов "Домой" и "Ячейка"... потому что я использую вложенные данные и не имею правильного dataIndex, когда редактор отображает, у него есть пустое значение для редактор. Поэтому я решил попробовать подключиться к событию beforeedit и получить свои значения, но, к сожалению, не похоже, что я могу установить значение редактора, так как я предполагаю, что метод startEdit имеет некоторые хитрости.

Вы увидите, что когда вы нажимаете на строку, она предупреждает значения Home и Cell, которые я хочу установить в их редакторах, но использование setValue для редактора не работает... кто-нибудь знает, как получить это происходит?

Answer 1

Мне удалось решить эту проблему с помощью метода setEditor (в столбце) при щелчке строки:

Ext.application({
  name : 'Fiddle',
  launch : function() {
    Ext.define('Phone', {
      extend: 'Ext.data.Model',
      fields: [
        {name: 'phone', type: 'int'},
        {name: 'type', type: 'string'}
      ]
    });
    Ext.define('Person', {
      extend: 'Ext.data.Model',
      fields: [
        {name: 'name', type: 'string'}
      ],
      hasMany: [
        {associationKey: 'phones', model: 'Phone', name: 'getPhonesStore'}
      ]
    });
    var beforeEdit = function(editor, context, eOpts) {
      var grid = context.grid;
      var record = context.record;
      if (grid && record) {
          var phonesStore = record.getPhonesStore();
          var columns = grid.getView().getGridColumns();
          if (columns && phonesStore) {
              for (var i = 1; i < columns.length; i++) {
                  var column = columns[i];
                  if (column) {
                      column.setEditor({
                          xtype: 'numberfield',
                          hideTrigger: true,
                          value: phonesStore.getAt(i - 1).get('phone')
                      });
                  }
              }
          }
      }
    };
    Ext.define('MyView', {
      extend: 'Ext.grid.Panel',
      store: Ext.create('Ext.data.Store', {
        model: 'Person',
        proxy: {
          type: 'memory'
        },
        data: [
          {name: 'blah', phones: [{phone: [phone], type: 'Home'}, {phone: [phone], type: 'Cell'}]},
          {name: 'bleh', phones: [{phone: [phone], type: 'Home'}, {phone: [phone], type: 'Cell'}]}
        ]
      }),
      plugins: [
        {ptype: 'rowediting', clicksToEdit: 1, listeners: {beforeedit: beforeEdit}}
      ],
      height: 300,
      width: 400,
      initComponent: function() {
        var store = this.getStore();
        if (store) {
          var firstRecord = store.first();
          if (firstRecord) {
            var phonesStore = firstRecord.getPhonesStore();
            if (phonesStore) {
              var columns = [{
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name'
              }];
              phonesStore.each(function(phoneRec) {
                columns.push({
                  xtype: 'gridcolumn',
                  text: phoneRec.get('type'),
                  renderer: this.phoneRenderer
                });
              }, this);
              this.columns = columns;
            }
          }
        }
        this.callParent();
      },
      phoneRenderer: function(value, metaData, record, rowIndex, colIndex) {
        return record.getPhonesStore().getAt(colIndex - 1).get('phone');
      }
    });
    Ext.create('MyView', {
      renderTo: Ext.getBody()
    });
  }
});