Grid Widget 专栏 - 关于 widget 变化，如何更新 grid store

Question

我需要在网格列中显示组合框和日期字段。因此使用了 widgetcolumn 并使用这些字段创建了网格。

但是现在在更改组合框或日期字段中的数据时，应在网格存储中更新新值，以便在转到下一页并返回后，值应保留在前几页中。

有人可以告诉我如何实现吗？

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

Answer 1

选项 1：同时使用小部件和单元格编辑器。

添加 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

选项2: 手动更新记录

我觉得这个解决方案更好。

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

为了获取 widgetColumn 中的 rowIndex，我引用了 "How to get rowIndex in extjs widget column" DrakeES's answer。

Answer 2

我能找到的最佳解决方案。函数 "getWidgetRecord" 无法通过搜索找到。它在小部件配置描述中进行了描述。请查看以下链接。

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

A config object containing an xtype.

This is used to create the widgets or components which are rendered into the cells of this column.

This column's dataIndex is used to update the widget/component's defaultBindProperty.

The widget will be decorated with 2 methods: getWidgetRecord - Returns the Ext.data.Model the widget is associated with. getWidgetColumn - Returns the Ext.grid.column.Widget the widget was associated with.

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

Grid Widget 专栏 - 关于 widget 变化，如何更新 grid store

Grid Widget column - on widget change, how to update grid store

extjs

extjs5