Question

我有一个组合框，根据另一个组合框的选择填充其值。我已经看到了基于选择更改底层存储中的参数的示例，但我想要实现的是根据第一个组合的选择更改第二个组合的存储本身。这是我的代码，但它不起作用。有人可以帮忙吗？

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

Answer 1

这不是它的设计工作方式！在配置中设置商店时，您将商店绑定到组合。您不需要更改商店，而是在需要时更改数据。

正确的做法是从服务器加载商店中的正确数据。要获取数据，您可以传递params，这将有助于服务器端代码获取您需要加载的一组选项。

Answer 2

您不希望更改正在使用的商店...简单地说，商店在实例化时绑定到控件。但是，您可以更改任何其他POST请求中使用的URL和params / baseParams。

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

Answer 3

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

在第一个“leads_filter_by”组合下面使用“listener”代码段。它将处理第二个组合框的动态存储绑定/更改。

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';
                      }  
                 }
         }

希望此解决方案能为您提供帮助。

谢谢＆amp;问候。

Answer 4

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

我的研究还建议不要在初始化后更改组合框上的存储和字段映射，这是我的解决方案：

在视图中创建一个容器，用于容纳组合框，以便为我提供一个参考点，以便稍后再添加
从组合框中获取初始配置的副本（这允许我在视图中明确地设置我的配置而不是硬编码到我的替换功能中...以防我以后想要添加其他配置属性）
将新商店，valueField和displayField应用于该配置
摧毁旧的组合框
使用修改后的配置创建新的组合框
使用我在步骤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);
},

动态更改ComboBox的DataStore

4 个答案: