如何为网格中的每个单元格组合框编辑器定义不同的存储？答案

【问题标题】：How define differents stores for each cell combobox editor in a grid?如何为网格中的每个单元格组合框编辑器定义不同的存储？
【发布时间】：2013-12-20 23:56:03
【问题描述】：

我需要使用 extjs 4.2.1 实现一个网格。该网格将具有 cellEditing 插件，并且在列中我将有许多文本字段和组合框。

我的问题是针对特定情况的。我有一个国家专栏（例如）。列编辑器将是带有国家/地区商店的组合框。下一个组合框将是同一行索引中选定国家/地区的城市。当我定义该商店时，此列将保留在同一家商店中，我不知道这一点。

在第 0 行，我选择美国，我必须在下一个组合中加载美国城市。在第 1 行，我选择英国国家，我必须加载英国城市，但如果返回第 0 行并选择美国城市，我想查看美国城市而不是英国城市。

如何为每个组合单元定义不同的商店？

【问题讨论】：

标签： javascript extjs combobox extjs4

【解决方案1】：

您需要使用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,                                        
    },
    ...
]

其次，您必须为beforeedit 事件添加Ext.grid.plugin.CellEditing 插件配置侦听器。在此侦听器中，您可以确定哪一列开始编辑。如果编辑列是城市列，可以从编辑行记录中得到所选国家的信息，过滤comboCitiesstore。因此，在过滤后的商店中，将只有选定国家/地区的城市。

例如网格配置中的插件配置应该是：

{
    ...
    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);
                    }
                }
            }
        })
    ],
    ...
}

看live fiddle配置示例：https://fiddle.sencha.com/#fiddle/2bj

【讨论】：

【解决方案2】：

你必须定义你的商店一次


Ext.define('MyApp.city.Store',{
   extend:'Ext.data.Store',
   //all properties which you need
});

你应该为城市单元创建它的实例


cityStore = Ext.create('MyApp.city.Store');

【讨论】：

是的，但是这样就会有每列的商店。