2011-03-22 87 views
6

我有一个组合框,根据另一个组合框的选择填充其值。 我已经看到基础商店中的参数根据选择而改变的示例,但我想要实现的是基于第一个组合中的选择更改第二个组合的商店本身。这是我的代码,但它不起作用。有人可以帮忙吗?动态更改组合框的DataStore

{ 
          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 
         },  

回答

3

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

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

1

您不想更改正在使用的商店...简而言之,商店在实例化时绑定到控件。但是,您可以更改URL和任何其他POST请求中使用的params/baseParams。

使用这些参数,您可以编码您的服务,以便在组合框的商店中返回不同的数据组。

1

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

使用下面的“听众”片段的第一“leads_filter_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'; 
         } 
       } 
     } 

希望这个解决方案能帮助你。

谢谢&此致敬礼。

0

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

我的研究也表明,在不建议改变初始化后,组合框的存储和字段映射所以这里是我的解决方案:

  1. 在视图中创建一个容器,将持有的组合框到给我一个参考点,稍后再添加它
  2. 从组合框中抓取初始配置的副本(这可以让我在视图中声明设置我的配置,而不是将其硬编码到我的替换功能中...如果我想补充后其他配置属性)
  3. 应用新店,valueField和displayField到配置
  4. 摧毁旧的组合框
  5. 创建修改配置
  6. 使用第1步中我引用新的组合框,添加新的组合框

视图:

items: [{ 
    xtype: 'combobox', 
    name: 'type', 
    allowBlank: false, 
    listeners: [{change: 'onTypeCombo'}], 
    reference: 'typeCombo' 
}, { // see controller onTypeCombo for reason this container is necessary. 
    xtype: 'container', 
    reference: 'valueComboContainer', 
    items: [{ 
     xtype: 'combobox', 
     name: 'value', 
     allowBlank: false, 
     forceSelection: true, 
     reference: 'valueCombo' 
    }] 
}, { 
    xtype: 'button', 
    text: 'X', 
    tooltip: 'Remove this filter', 
    handler: 'onDeleteButton' 
}] 

控制器:

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