ExtJS组合框过滤器

Question

I have two comboboxes. The first one is for selecting a region, and the second one is for selecting a province. The values that should appear in the province combobox will be based on the value selected in the region combobox.

Region combobox code:

xtype: 'combobox',
label: 'Region ID',
margin: '10 20',
flex: 1,
valueField: 'regionid',
displayField: 'regionname',
store: 'RegionStore',
minLength: 1,
id: 'region_id',
reference: 'region_id',
name: 'region_id',
listeners: {
  select: function(combo, value) {
    var id = Ext.getCmp('province'),
    store = id.getStore();

    if (!value) {
      store.getFilters().removeAll();
    } 
    else {
      store.filter('regionid', val)
    }
  }
}

Province combobox code:

label: 'Province',
margin: '10 20',
flex: 1,
queryMode: 'remote',
store: 'ProvinceStore',
valueField: 'provinceid',
displayField: 'provincename',
minLength: 1,
id: 'province',
name: 'province',
reference: 'province'

I'm not getting any errors but when I click the province combobox(assuming that I have already selected a value for the region combobox), the values displayed in the province combobox are not filtered, instead, all of the results are displayed. I have been on this for days. Is there someone who can help?

Answer 1

You are using queryMode: 'remote', so that your server returns the data. The frontend has no control, what is returned.

Plus in your example val should be value.

I would go with a chained store, that has a filter based on the selection.

Here is a fiddle to show this: Fiddle

This is duplicate to your other question