ExtJS chained store filter not filtering

Question

Filter for combobox is not working and I am not sure why. I have two comboboxes, one is province and other is city. When I select a province, the city combobox will be filtered according to the selected province using the province_id.

View Model Code:

data: {
selectedProvince: null
},

stores: {
  province: {
    fields: [ 'province_id', 'province_name' ],
    proxy: {
      type: 'ajax',
      url: '*some url to province*',
      reader: {
        type: 'json',
        rootProperty: 'data'
      }
    }
  },

  city: {
    fields: [ 'city_id', 'city_name', 'province_id' ],
        proxy: {
      type: 'ajax',
      url: '*some url to city*',
      reader: {
        type: 'json',
        rootProperty: 'data',
      }
    },

  },

  filteredStore: {
    type: 'chained',
    source: '{city}',
    remoteFilter: false,
    filters: [{
      property: 'province_id',
      value: '{selectedProvince}'
    }],

  }
}

Province Combobox Code:

xtype: 'combobox',
label: 'Province',
valueField: 'province_id',
displayField: 'province_name',
bind: {
  store: '{province}',
  value: '{selectedProvince}'
}

City Combobox Code:

xtype: 'combobox',
label: 'City',
valueField: 'city_id',
displayField: 'city_name',
bind: {
  store: '{filteredStore}'
}

I have tried these:

https://fiddle.sencha.com/#fiddle/983&view/editor

https://fiddle.sencha.com/#view/editor&fiddle/2dt0

And I have also tried placing the filter inside the combobox like this:

xtype: 'combobox',
label: 'City',
valueField: 'city_id',
displayField: 'city_name',
bind: {
   store: '{filteredStore}',
   filters: {
      property: 'province_id',
      value: '{selectedProvince}'
    }
 }

And still, the results are still not filtered. I'm using extjs 7, if that helps. Thanks

Answer 1

This is a duplicate from your other question:

The answer is still in this Fiddle

I updated it to match your question in this thread.

You have to set both stores to autoLoad: true and the combobox to queryMode: 'local'.