javascript - 如何为网格中的每个单元格组合框编辑器定义不同的商店？

Question

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

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

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

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

Answer 1

您需要使用启用网格单元格编辑的 Ext.grid.plugin.CellEditing 插件设置网格。作为城市栏编辑器，您将使用 Ext.form.field.ComboBox。当用户在城市列的单元格上进入编辑模式时，您会过滤编辑器组合框的商店。您需要从编辑行记录中过滤城市组合框的有关所选国家/地区的信息。

1. 首先，您必须使用 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,                                        
       },
       ...
   ]
   

2. 其次，您必须添加到您的 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