Extjs 动态更改组合框的数据存储

Extjs 动态更改组合框的数据存储,extjs,Extjs,我有一个组合框,它根据对另一个组合框的选择填充其值。 我见过一些例子,其中基础存储中的参数是根据选择而更改的,但我想要实现的是根据第一个组合上的选择更改第二个组合的存储本身。这是我的代码,但不起作用。有人能帮忙吗 { xtype: 'combo', id: 'leads_filter_by', width: 100,

我有一个组合框,它根据对另一个组合框的选择填充其值。 我见过一些例子,其中基础存储中的参数是根据选择而更改的,但我想要实现的是根据第一个组合上的选择更改第二个组合的存储本身。这是我的代码,但不起作用。有人能帮忙吗

{
                            xtype: 'combo',
                            id: 'leads_filter_by',
                            width: 100,
                            mode: 'local',
                            store: ['Status','Source'],
                            //typeAhead: true,
                            triggerAction: 'all',
                            selectOnFocus:true,
                            typeAhead: false,
                            editable: false,
                            value:'Status',
                            listeners:{
                                'select': function(combo,value,index){ 
                                    var filter_to_select = Ext.getCmp('cmbLeadsFilter');
                                    var container = filter_to_select.container;
                                    if (index == 0){
                                          filter_to_select.store=leadStatusStore;
                                        filter_to_select.displayField='leadStatusName';
                                        filter_to_select.valueField='leadStatusId';
                                      } else if(index==1) {
                                          filter_to_select.store=leadSourceStore;
                                        filter_to_select.displayField='leadSourceName';
                                        filter_to_select.valueField='leadSourceId';
                                      }  
                                    }
                               }
     },      
{
                            xtype: 'combo',
                            id: 'cmbLeadsFilter',
                            width:100,
                            store: leadStatusStore,
                            displayField: 'leadStatusName',
                            valueField: 'leadStatusId',
                            mode: 'local',
                            triggerAction: 'all',
                            selectOnFocus:true,
                            typeAhead: false,
                            editable: false
                        },     

这不是它设计的工作原理!!在配置中设置存储时,将存储绑定到组合。您不需要更改存储,而是应该在需要时更改数据


正确的方法是从服务器向存储加载正确的数据。要获取数据,您可以传递参数,以帮助服务器端代码获取需要加载的选项集。

您将不希望更改正在使用的存储。。。简单地说,存储在实例化时绑定到控件。但是,您可以更改URL以及在任何其他POST请求中使用的参数/baseParams


使用这些参数,您可以对服务进行编码,以在组合框的存储中返回不同的数据集。

对于建议的问题,您可以尝试以下解决方案:

使用下面的“listener”片段作为第一个“leads\u filter\u by”组合。它将处理第二个组合框的动态存储绑定/更改

listeners:{
           'select': function(combo,value,index){ 
                     var filter_to_select = Ext.getCmp('cmbLeadsFilter');
                     var container = filter_to_select.container;
                     if (index == 0){
                        //filter_to_select.store=leadStatusStore;
                        filter_to_select.bindStore(leadStatusStore);
                        filter_to_select.displayField='leadStatusName';
                        filter_to_select.valueField='leadStatusId';
                     } else if(index==1) {
                       //filter_to_select.store=leadSourceStore;
                        filter_to_select.bindStore(leadSourceStore);
                        filter_to_select.displayField='leadSourceName';
                        filter_to_select.valueField='leadSourceId';
                      }  
                 }
         }
希望这个解决方案能对您有所帮助


谢谢和问候。

我也有类似的问题。第二个组合框将加载存储并显示值,但当我选择一个值时,它实际上不会选择。我将单击列表项,组合框值将保持为空

我的研究还表明,不建议在初始化后更改组合框上的存储和字段映射,因此我的解决方案如下:

  • 在视图中创建一个容器,该容器将容纳组合框,以便为我提供一个参考点,以便稍后将其添加回来
  • 从组合框中获取初始配置的副本(这使我可以在视图中反向设置配置,而不是将其硬编码到替换函数中…以防以后需要添加其他配置属性)
  • 将新存储、valueField和displayField应用于该配置
  • 销毁旧组合框
  • 使用修改的配置创建新的组合框
  • 使用步骤1中的我的引用,添加新的组合框
  • 视图:

    控制器:

    replaceValueComboBox: function() {
        var me = this;
    
        var typeComboSelection = me.lookupReference('typeCombo').selection;
        var valueStore = Ext.getStore(typeComboSelection.get('valueStore'));
        var config = me.lookupReference('valueCombo').getInitialConfig();
    
        /* These are things that get added along the way that we may also want to purge, but no problems now:
        delete config.$initParent;
        delete config.childEls;
        delete config.publishes;
        delete config.triggers;
        delete config.twoWayBindable;
       */
        config.store = valueStore;
        config.valueField = typeComboSelection.get('valueField');
        config.displayField = typeComboSelection.get('displayField');
        me.lookupReference('valueCombo').destroy();
        var vc = Ext.create('Ext.form.field.ComboBox', config);
    
        me.lookupReference('valueComboContainer').add(vc);
    },
    
    replaceValueComboBox: function() {
        var me = this;
    
        var typeComboSelection = me.lookupReference('typeCombo').selection;
        var valueStore = Ext.getStore(typeComboSelection.get('valueStore'));
        var config = me.lookupReference('valueCombo').getInitialConfig();
    
        /* These are things that get added along the way that we may also want to purge, but no problems now:
        delete config.$initParent;
        delete config.childEls;
        delete config.publishes;
        delete config.triggers;
        delete config.twoWayBindable;
       */
        config.store = valueStore;
        config.valueField = typeComboSelection.get('valueField');
        config.displayField = typeComboSelection.get('displayField');
        me.lookupReference('valueCombo').destroy();
        var vc = Ext.create('Ext.form.field.ComboBox', config);
    
        me.lookupReference('valueComboContainer').add(vc);
    },