Столбец Grid Widget - при изменении виджета, как обновить хранилище сетки

Question

У меня есть требование отображать combobox и datefield в столбцах Grid. Так используется widgetcolumn и создана сетка с этими полями.

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

Может ли кто-нибудь дать мне знать, как я могу это достичь?

Fiddle: https://fiddle.sencha.com/#fiddle/183r

Answer 1

Option1: Используйте оба виджета и сотовый редактор.

Добавить плагин CellEditing и установить редактор на тот же компонент, что и виджет.

{ xtype: 'widgetcolumn', text: 'Gender', dataIndex: 'gender', flex: 1, 
        widget: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'}, 
        editor: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'} 
}, 

Пример: https://fiddle.sencha.com/#fiddle/1843

Option2: вручную обновить запись.

Я чувствую, что это решение лучше.

widget: {xtype: 'datefield', 
      listeners:{ 
       select: function(datefield, value, eOpts){ 
        var rowIndex = datefield.up('gridview').indexOf(datefield.el.up('table')); 
        var record = datefield.up('gridview').getStore().getAt(rowIndex); 
        record.set('dob', value); 
       } 
      } 
     } 

Пример: https://fiddle.sencha.com/#fiddle/1842

Чтобы получить RowIndex в widgetColumn, я ссылается "How to get rowIndex in extjs widget column" DrakeES's answer.

Answer 2

Лучшее решение, которое я мог найти. Функция «getWidgetRecord» не может быть найдена при поиске. Он описан в описании конфигурации виджета. Посмотрите на следующие Ссылки.

http://docs.sencha.com/extjs/5.1.3/Ext.grid.column.Widget.html#cfg-widget http://docs.sencha.com/extjs/6.0.2-classic/Ext.grid.column.Widget.html#cfg-widget

Объект конфигурации, содержащий xtype.

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

DataIndex этого столбца используется для обновления виджета/компонента по умолчаниюBindProperty.

Виджет будет украшен двумя способами: getWidgetRecord - возвращает объект Ext.data.Model, с которым связан виджет. getWidgetColumn - возвращает экземпляр Ext.grid.column.Widget, с которым связан виджет.

widget:{ 
    xtype:'combo', 
    editable: false, 
    store: Ext.create('Ext.data.Store',{ 
     fields:['name','text'], 
     data:[ 
      {"name":"integer", "text":"Integer"}, 
      {"name":"float","text":"Float"} 
     ] 
    }), 
    listeners:{ 
     select: function(combo, value, eOpts){ 
      var record = combo.getWidgetRecord(); 
      record.set('type', value.get('name')); 
     } 
    }, 
    valueField:'name', 
    displayField:'text', 
    allowBlank: false 
} 

или

widget: { 
    xtype: 'textfield', 
    allowBlank: false, 
    listeners:{ 
     change: function(textfield, value, eOpts){ 
      var record = textfield.getWidgetRecord(); 
      record.set('field', value); 
     } 
    } 
}