ExtJS 6 ViewModel store bindings and setters

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:

1. Is this a feature of the framework or am I configuring things incorrectly.

2. 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