Dependent combo box - extjs

Question

Я пытаюсь настроить поле со списком, которое зависит от другого поля со списком. Мой скрипт отлично работает для первого значения в моем первом поле со списком и отображает правильные зависимые значения во втором поле со списком. Однако он перестает работать, когда я пытаюсь изменить значение в своем первом поле со списком.

init: function() { var me = this;

var roles=[ 
     ['Gen', 'General'], 
     ['Neuro', 'Neurotoxin User'], 
     ['Admin', 'Administrator (System Administrator Only)'] 
    ]; 
    Ext.define('Testfile.model.Role', { 
      extend: 'Ext.data.Model', 
      fields: ['abbr', 'role'] 
     }); 
    var rolesStore = new Ext.data.Store({ 
     model: 'Testfile.model.Role', 
     proxy: { 
      type: 'memory', 
      reader: { 
       type: 'array' 
      } 
     }, 
     data: roles 
    }); 

    var tests=[ 
     [1, 'Gen', 'Test1'], 
     [2, 'Gen', 'Test3'], 
     [3, 'Neuro', 'Test2'] 
    ]; 
    Ext.define('Testfile.model.Test', { 
      extend: 'Ext.data.Model', 
      fields: ['id', 'abbr', 'test'] 
     }); 
    var testsStore = new Ext.data.Store({ 
     model: 'Testfile.model.Test', 
     proxy: { 
      type: 'memory', 
      reader: { 
       type: 'array' 
      } 
     }, 
     data: tests 
    }); 
    me.form=Ext.create('Ext.form.Panel',{ 
       renderTo:document.body, 
       bodyPadding: 10, 
       width: 550, 
       style:'margin:16px', 
       height: 300, 
       title:'Linked Combos', 
       defaults: {xtype:'combo'}, 
           items: [{ 
        fieldLabel: 'Application Role', 
        id:'firstComboID', 
             store:rolesStore, 
        valueField: 'abbr',      
        displayField: 'role',       
        typeAhead: true,         
         forceSelection: true,                 
             allowBlank: false, 
             editable: true, 
        triggerAction: 'all',       
        listeners: { 
              select:{fn:function(combo, value) { 
         var sample = Ext.getCmp('secondComboID');         
       sample.store.filter('abbr', combo.getValue());        
       sample.clearValue();          
       }}         
       }         
       },{       
       fieldLabel: 'Select Test', 
       id:'secondComboID',         
       store:testsStore, 
       valueField: 'id', 
       displayField: 'test', 
       typeAhead: true, 
       forceSelection: true, 
            allowBlank: false, 
            editable: true, 
       triggerAction:'all', 
       lastQuery:'' 
            } 
        ] 
          }); 

    me.container.add(me.form); 
    }, 
}); 

Я не знаю, в чем проблема. Может кто-нибудь попросит исправить мой код?

Answer 1

Что происходит, так это то, что вы дважды фильтруете набор результатов 2-го, 3-го, n-го раз, когда вы добавляете фильтр в хранилище. Чтобы заставить его работать так, как вы хотите, сначала нужно очистить фильтры магазина с помощью clearFilter().

Вот рабочий пример кода с этой частью применяются: https://fiddle.sencha.com/#fiddle/tm

sample.store.clearFilter(); 
sample.store.filter('abbr', combo.getValue());