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

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

通过配置示例查看实时小提琴: https ://fiddle.sencha.com/#fiddle/2bj