时间戳

首页 > 解决方案 > ExtJS 绑定过滤器并在子组合框上选择默认值

extjs - ExtJS 绑定过滤器并在子组合框上选择默认值

问题描述

我正在尝试创建两个组合框。第一个显示国家名称，第二个显示省/州。这个想法是根据第一个组合的选择过滤第二个组合，并将“VisitingCountryProvince”的值作为默认选择。下面代码的问题是，它没有根据第一个组合框选择默认值。如果我删除绑定过滤器，第二个组合框会显示“VisitingCountryProvince”的正确值。

任何想法？

{
    xtype: 'fieldset',
    title: 'Visiting Country',
    layout: 'anchor',
    anchor: '-10',
    collapsible: false,
    defaults: {
        xtype: 'combo',
        labelStyle: 'font-weight: bold;',
        flex: 1,
        anchor: '0',
        editable: false,
        forceSelection: true,
        allowBlank: false,
        emptyText: 'Select...',
        queryMode: 'local',
    },
    items: [{
        name: 'VisitingCountry',
        fieldLabel: 'Main',
        reference: 'visitingCountryFieldRef',
        publishes: 'value',
        store: {
            type: 'arraydropdownstore'
        },
        valueField: 'value',
        displayField: 'value'
    }, {
        name: 'VisitingCountryProvince',
        fieldLabel: 'Sub',
        store: {
            type: 'array',
            fields: ['value', 'countryName']
        },
        bind: {
            filters: {
                property: 'countryName',
                value: '{visitingCountryFieldRef.value}'
            }
        },
        valueField: 'value',
        displayField: 'value'
    }]
},

我能找到的最接近问题的答案在这里，如何使用组合“发布”值和绑定来过滤另一个组合上的存储

我刚刚发现，我可以进行过滤或选择默认值，而不是两者兼而有之。如何从过滤列表中过滤和绑定默认值？

标签： extjssencha-cmd

解决方案

您需要在第一个组合框的“选择”事件处理程序中编写过滤第二个组合存储值的逻辑。

{
        name: 'VisitingCountry',
        fieldLabel: 'Main',
        reference: 'visitingCountryFieldRef',
        publishes: 'value',
        store: {
            type: 'arraydropdownstore'
        },
        valueField: 'value',
        displayField: 'value',
        listeners:{
             select:function(){
                //Access the second[bound to second combobox]store and apply the 
                //filter, Also there are arguments for select event handler, for this 
                //Please refer docs.sencha.com for extjs version you are using.
             }
        }
}

推荐阅读