我需要使用extjs 4.2.1实现网格。这个网格将有cellEditing插件,在列中我将有许多文本字段和组合框。
我的问题是针对特定情况。我有一个国家专栏(例如)。列编辑器将与国家商店组合使用。 下一个组合框将是同一行指数所选国家的城市。当我定义该商店时,此列将保留在同一商店,我不知道这一点。
在第0行,我选择美国,我必须在下一个组合中加载美国城市。 在第1行,我选择英国国家,我必须加载英国城市,但如果回到第0行并选择美国城市,我想看到美国城市,而不是英国城市。
如何为每个组合单元定义不同的商店?
答案 0 :(得分:5)
您需要使用Ext.grid.plugin.CellEditing
插件设置网格,以启用网格单元格编辑。作为城市列编辑器,您将使用Ext.form.field.ComboBox
。当用户在城市列中的单元格上进入编辑模式时,您将过滤编辑器组合框的商店。有关筛选从编辑行记录中获得的城市组合框所需的所选国家/地区的信息。
首先,您必须使用Ext.form.field.ComboBox
实例设置城市列编辑器,该实例将用于编辑:
var comboCities = Ext.create('Ext.form.field.ComboBox', {
store: storeCities,
queryMode: 'local',
displayField: 'name',
valueField: 'name'
});
在网格列定义中:
columns: [
...
{
header: 'City',
dataIndex: 'city',
editor: comboCities,
},
...
]
其次,您必须为Ext.grid.plugin.CellEditing
事件添加beforeedit
插件配置侦听器。在此侦听器中,您可以确定哪个列开始编辑。如果编辑列是城市列,您可以从编辑有关所选国家/地区的行记录信息并过滤comboCities
商店。因此,在过滤商店中,只有选定国家/地区的城市。
例如,网格配置中的插件配置应为:
{
...
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, e) {
// detrmine which column start editing
if (e.colIdx == 2) {
// get information about selected country from editin row record
var selectedCountry = e.record.get('country');
// filter store with cities
storeCities.clearFilter();
storeCities.filter('country', selectedCountry);
}
}
}
})
],
...
}
通过配置示例查看实时小提琴: https://fiddle.sencha.com/#fiddle/2bj
答案 1 :(得分:0)
您必须定义您的商店一次
Ext.define('MyApp.city.Store',{
extend:'Ext.data.Store',
//all properties which you need
});
你应该为城市单元格创建它的实例,如
cityStore = Ext.create('MyApp.city.Store');