依赖组合框 - extjs

时间:2013-10-10 17:02:09

标签: extjs extjs4.1

我正在尝试设置一个依赖于其他组合框的组合框。我的脚本在第一个组合框中的第一个值正常工作,它在第二个组合框中显示正确的相关值。但是,当我尝试更改第一个组合框中的值时,它会停止工作。

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

我不知道是什么问题。有人可以建议修复我的代码吗?

1 个答案:

答案 0 :(得分:1)

正在发生的事情是,您将过滤器添加到商店的第2,第3,第n次对结果集进行双重过滤。为了让它以您想要的方式工作,您需要先使用clearFilter()清除商店的过滤器。

以下是应用该代码的代码的工作示例:https://fiddle.sencha.com/#fiddle/tm

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