Dependent combo box - extjs

0
votes

I am trying to set up a combo box that is dependent on an other combo box. My script is working fine for the first value in my first combo box and it displays the correct dependent values in the second combo box. However it stops working when I try changing the value in my first combo box.

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

I don't know what is the issue. Can someone please suggest a fix to my code?

1
extjsextjs4.1

1 Answers

1
votes

What's happening is that you're double-filtering the result set the 2nd, 3rd, nth times that you add the filter to the store. In order to get it to work the way you want, you'll need to first clear the store's filters with clearFilter().

Here's a working example of your code with that piece applied: https://fiddle.sencha.com/#fiddle/tm

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