ExtJS绑定筛选器，并在子组合框中选择默认值

Question

I am trying to create two combo boxes. The first one shows the country names and the second one shows provinces/states. The idea is to filter the second combo based the selection on first one and put the value of 'VisitingCountryProvince' as the default selection. The problem with the below code is, it is not selecting the default value based on the first combo box. If I remove the bind filter, the second combo box shows the correct value of 'VisitingCountryProvince'.

Any idea?

{
    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'
    }]
},

The closest answer to the issue I could find is in here, How to use combo "publishes" value & bindings to filter store on another combo

I just figured out that, I can do either filter or select a default value, not both. How do I filter and bind a default value from the filtered list?

Answer 1

You need to write your logic of filtering the values of second combo store in the "select" event handler of the first combo box.

{
        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.
             }
        }
}