コンボボックスのデータストアを動的に変更する

Question

私は別のコンボボックスの選択に基づいて値を入力するコンボボックスを持っています。 基本ストアのパラメータが選択に基づいて変更される例を見てきましたが、達成したいのは、最初のコンボの選択に基づいて2番目のコンボのストア自体を変更することです。これは私のコードですが、動作しません。誰かが助けてくれますか？

{ 
          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

これはどのように動作するように設計されていません！設定でストアを設定すると、コンボにストアがバインドされます。ストアを変更するのではなく、必要に応じてデータを変更する必要があります。

サーバーから正しいデータでストアをロードするのが正しい方法です。データをフェッチするには、サーバーサイドコードがロードする必要のあるオプションのセットを取得するのに役立つパラメーターを渡すことができます。

Answer 2

使用するストアを変更する必要はありません。単純に言えば、ストアはインスタンス化されるときにコントロールにバインドされます。ただし、追加のPOST要求で使用されるURLとparams/baseParamsを変更することはできます。

これらのパラメータを使用すると、コンボボックスのストアに異なるデータセットを返すようにサービスをコーディングすることができます。最初「leads_filter_by」コンボのための「リスナー」スニペット以下

用途：あなたは解決策の下に試すことができ、提案の問題については

Answer 3

。 2番目のコンボボックスの動的ストアバインド/変更を処理します。

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

このソリューションがお役に立てば幸いです。

ありがとうございました&よろしく。

Answer 4

私にも同様の問題がありました。 2番目のコンボボックスはストアをロードして値を表示しますが、値を選択すると実際には選択されません。リストアイテムをクリックすると、コンボボックスの値は空白のままになります。

私の研究はまた、私の解決策だったので、ここでは、初期化後にコンボボックスに格納し、フィールドのマッピングを変更することは推奨されていないことを示唆した。

1. にコンボボックスを開催するビュー内のコンテナを作成します。私に参照点を後で追加するには
2. コンボボックスの最初の設定をコピーしてください（これは私の設定を宣言的にビューに設定し、置換機能にハードコードしません...場合、私は、後に他の設定プロパティを追加したい）
3. 追加し、ステップ1からの私の参照を使用して変更設定
4. で新しいコンボボックスを作成します
5. 古いコンボボックスを破壊
6. その設定に新店舗、valueFieldとdisplayFieldを適用します新しいコンボボックス

ビュー：

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