Question

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

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

有人能告诉我如何实现这个目标吗？

小提琴：https://fiddle.sencha.com/#fiddle/183r

Answer 1

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

添加CellEditing插件并将编辑器设置为与widget相同的组件。

{ 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

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

Answer 2

我能找到的最佳解决方案。函数＆＃34; getWidgetRecord＆＃34;找不到搜索。它在widget配置描述中描述。请查看以下链接。

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用于更新小部件/组件的defaultBindProperty。

小部件将使用两种方法进行修饰：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);
        }
    }
}

Grid Widget列 - 关于窗口小部件更改，如何更新网格存储

2 个答案: