Extjs 网格小部件专栏-关于小部件更改,如何更新网格存储

Extjs 网格小部件专栏-关于小部件更改,如何更新网格存储,extjs,extjs5,Extjs,Extjs5,我需要在网格列中显示combobox和datefield。所以使用widgetcolumn并使用这些字段创建网格 但现在在更改combobox或datefield中的数据时,新值应该在网格存储中更新,以便在转到下一页并返回后,值应该保留在前一页中 有人能告诉我如何才能做到这一点吗 小提琴:选项1:同时使用小部件和单元格编辑器 添加CellEditing插件并将编辑器设置为与小部件相同的组件 { xtype: 'widgetcolumn', text: 'Gender', dataIndex: '

我需要在网格列中显示combobox和datefield。所以使用widgetcolumn并使用这些字段创建网格

但现在在更改combobox或datefield中的数据时,新值应该在网格存储中更新,以便在转到下一页并返回后,值应该保留在前一页中

有人能告诉我如何才能做到这一点吗


小提琴:

选项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'}
},
例如:

选项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);
                }
            }
        }
例如:


为了在widgetColumn中获取rowIndex,我引用了。

我能找到的最佳解决方案。 函数“getWidgetRecord”无法通过搜索找到。 它在小部件配置描述中描述。 看看下面的链接

包含xtype的配置对象

这用于创建呈现到此列的单元格中的小部件或组件

此列的dataIndex用于更新小部件/组件的defaultBindProperty

这个小部件将用两个方法装饰:getWidgetRecord-Returns 与小部件关联的Ext.data.Model。getWidgetColumn- 返回与小部件关联的Ext.grid.column.Widget


我对这个答案有疑问。allowBlank:false是否适用于widget列。我面临一个allowBlank不在widgetI上工作的问题,我在Fiddle中做了一些测试。看起来,6.0.2有问题。如果从6.0.2切换到6.7,则忽略可编辑:false。allowBlank和editable工作正常,但是!6.7不能作为GPL使用!最新版本是6.0.2。自获得Idera后,Sencha停止发布GPL版本。您也不允许在开源“GPL”项目中使用付费版本“6.7,7.x”。这就是我放弃extjs作为框架的原因。感谢您的时间和努力:)
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);
        }
    }
}