Как добавить элемент в текущей записи редактора сетки комбо в ExtJS5

Question

ExtJS 5

У меня есть сетка и она имеет 3 колонки (Id, студентов, отобранных студентов). В столбце2 (Студенты) у меня есть привязка статических данных. Когда я нажимаю на любой элемент второго столбца, эта запись должна быть добавлена ​​в столбце3 (выбранные ученики) в текущей записи или строке. У меня есть одна кнопка, также называемая (Добавить новый элемент), которая используется для динамического создания новой строки.

Примечание. Когда я добавляю новую строку, нажав кнопку «Добавить новый элемент», добавится новая строка и значение 3 столбца (выбранные ученики) должно быть пустым.

Я пробовал так много, но не получил решения. Основная проблема заключается в том, что когда я привязываю данные в третьем столбце, тогда он связывается правильно, но когда я добавляю новую строку, она также отображается в новой записи, но этого не должно быть. Если я очищаю элемент store или combo, он удаляется из всех строк вместо текущей записи/строки.

Ext.onReady(function() { 

       var comboStore1 = Ext.create('Ext.data.Store', 
        { 
         fields: ['text', 'id'], 
         data: 
         [ 
          { "text": "Value1", "id" :1 }, 
          { "text": "Value2", "id": 2 }, 
          { "text": "Value3", "id": 3 } 
         ] 
        }); 

       var comboStore2 = Ext.create('Ext.data.Store', 
        { 
         fields: ['text', 'id'] 
        }); 

       var gridStore = Ext.create('Ext.data.Store', 
        { 
         fields: ['id', 'students', 'selectedStudents'], 
         data: 
         [ 
          { "id" : 1}, 
         ] 
        });    

       var window = new Ext.Window({ 
        id: 'grdWindow', 
        width: 400, 
        height: 200, 
        items: [ 
         { 
          xtype: 'panel', 
          layout: 'fit', 
          renderTo: Ext.getBody(), 
          items: [ 
           { 
            xtype: 'button', 
            text: 'Add New Item', 
            handler: function() { 
             var store = Ext.getCmp('grdSample').store; 

             var rec = { 
              id: 1, 
              students: '', 
              selectedStudents: '' 
             } 
             store.insert(store.length + 1, rec); 
            } 
           }, 
           { 
            xtype: 'grid', 
            id: 'grdSample', 
            store: gridStore, 
            plugins: [ 
              Ext.create('Ext.grid.plugin.CellEditing', { 
               clicksToEdit: 1 
              }) 
              ], 
            columns: [ 
             { 
              header: 'id', 
              dataIndex: 'id' 
             }, 
             { 
              header: 'Students', 
              dataIndex: 'students', 
              editor: { 
               xtype: 'combobox', 
               store: comboStore1, 
               displayField: 'text', 
               valueField: 'text', 
               queryMode: 'local', 
               listeners: { 
                select: function (combo, records) { 
                 var rec = records[0].data; 
                } 
               } 
              } 
             }, 
             { 
              header: 'Selected Students', 
              dataIndex: 'selectedStudents', 
              editor: { 
               xtype: 'combobox', 
               id: 'combo2', 
               store: comboStore2, 
               displayField: 'text', 
               valueField: 'id' 
              } 
             } 
            ] 
           } 
          ] 
         }] 
       }).show(); 
      }); 

Я пробовал почти все, но все же у меня не было никакого решения. По-другому - как вставить значение в редактор сетки только в текущей строке. (Другая строка не должна отражаться). Если отражается другая строка, то как удалить значение перед рендерингом из другой строки без отражения других строк.

Answer 1

Ну, я предполагаю, что основная проблема заключается в том, что вы пытаетесь изменить какой-либо компонент редактора строк сетки, хотя предполагается, что он будет одинаковым для всех строк сетки.

Основная проблема заключается в том, что когда я привязываю данные в третьем столбце, тогда он связывается надлежащим образом, но когда я добавляю новую строку, она также отображается и в новой записи, но этого не должно быть. Если я очищаю элемент store или combo, он удаляется из всех строк вместо текущей записи/строки.

Это происходит потому, что все редакторы строк сетки используют тот же экземпляр магазина, comboStore2, и когда вы меняете его данные, вы меняете его для всех редакторов.

Чтобы создать отдельное хранилище для каждого редактора вы должны сделать что-то вроде этого:

{ 
    header: 'Selected Students', 
    dataIndex: 'selectedStudents', 
    editor: { 
     xtype: 'combobox', 
     id: 'combo2', 
     store: Ext.create('Ext.data.Store', { 
       fields: ['text', 'id'] 
     }), 
     displayField: 'text', 
     valueField: 'id' 
    } 
} 

Но чем его стало не тривиальна для выбора конкретного компонента редактора строк и его магазин.

Я рекомендую вам взглянуть на Ext.grid.column.Widget, так как вы можете привязать определенную строку (ее запись на самом деле) к виджету с свойством onWidgetAttach.

Answer 2

Ваш второй столбец является фиктивным. Вы можете напрямую использовать компонент tagfield в качестве редактора для своего третьего столбца, который позволяет вам выбрать несколько значений.

И вам понадобится один магазин для списка всех учащихся.