我需要使用 extjs 4.2.1 实现一个网格。这个网格将有 cellEditing 插件,在列中我将有许多文本字段和组合框。
我的问题是针对特定情况的。我有一个国家专栏(例如)。列编辑器将是带有国家/地区商店的组合框。 下一个组合框将是同一行索引处所选国家/地区的城市。当我定义那家商店时,此列将保留在同一家商店,我不知道这一点。
在第 0 行,我选择了美国,我必须在下一个组合中加载美国城市。 在第 1 行中,我选择英国国家,我必须加载英国城市,但如果返回第 0 行并选择美国城市,我想看到美国城市而不是英国城市。
如何为每个组合单元格定义不同的商店?
最佳答案
您需要使用启用网格单元格编辑的 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); } } } }) ], ... }
查看带有配置示例的实时 fiddle : https://fiddle.sencha.com/#fiddle/2bj
关于javascript - 如何为网格中的每个单元格组合框编辑器定义不同的商店?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20713788/