ExtJS 6 ViewModel store bindings and setters - extjs

Question

I am using ExtJS 6 to build a filterable dataview panel, this is my panel : Panel.js
Ext.define('myApp.view.main.widgets.Panel', {
extend: 'Ext.panel.Panel',
....
viewModel: {
type: 'widgets-view-model',
stores: {
widgets: {
type: 'widgets'
}
}
},
items: [{
xtype: 'searchfield',
name: 'widgets-filter',
height: 24,
width: '100%',
bind: {
store: '{store}'
}
}, {
margin: '5 0 0 0',
autoScroll: true,
bodyPadding: 1,
flex: 1,
frame: true,
referenceHolder: true,
bind: {
widgets: '{widgets.data.items}'
},
setWidgets: function (widgets) {
this.lookupReference('the-widget-items-panel').setWidgets(widgets);
},
items: [{
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items: [{
reference: 'the-widget-items-panel',
xtype: 'the-widgets'
}]
}]
}]
});
The viewModel does nothing;
Ext.define('myApp.view.main.widgets.WidgetsViewModel', {
extend: 'Ext.app.ViewModel',
alias:'viewmodel.widgets-view-model'
});
In the view controller, I do the following in the view's afterrender event handler;
onAfterRender: function () {
var store = this.view.getViewModel().getStore('widgets');
store.load();
}
At which point, the widgets setter "setWidgets" is called as expected. However when I filter the store using the store's "filterBy" method, I expect the widgets setter "setWidgets" to be called, but it isn't.
I also tried resetting the store by doing the following;
store.removeAll();
store.load(function () {
console.log('reloaded...!')
});
to see if a reload of store data will trigger the widgets setter "setWidgets", but it doesn't.
It appears changes to the viewModel store only triggers calls to setters once only.
QUESTION:
Is this a feature of the framework or am I configuring things incorrectly.
How do I re-configure view/store/viewModel so that the widgets setter "setWidgets" is called for every update/change to the store, i.e. when;
data is loaded
store is filtered
store data changes
store updates

Answer 1

Filtering a store doesn't change the items instance, it only changes the contents - that's why setWidgets isn't being called again. If you want to respond to data changing in the store, you need to listen to events from the store.
Also - binding on widget.data.items is a bad idea; that's plugging into the internal structure of the store. Listen to the events instead:
load
filterchange
datachanged
update