ExtJS 6 ViewModel 存储绑定和设置器

Question

我正在使用 ExtJS 6 构建一个可过滤的数据视图面板，这是我的面板：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'
            }]
        }]
    }]
});

viewModel 什么都不做；

Ext.define('myApp.view.main.widgets.WidgetsViewModel', {
    extend: 'Ext.app.ViewModel',
    alias:'viewmodel.widgets-view-model'
});

在视图控制器中，我在视图的 afterrender 事件处理程序中执行以下操作；

onAfterRender: function () {
    var store = this.view.getViewModel().getStore('widgets');
    store.load();
}

此时，小部件 setter "setWidgets" 按预期被调用。但是，当我使用商店的 "filterBy" 方法过滤商店时，我希望调用小部件 setter "setWidgets"，但事实并非如此。

我还尝试通过执行以下操作来重置商店；

store.removeAll();
store.load(function () {
    console.log('reloaded...!')
});

查看重新加载商店数据是否会触发小部件 setter "setWidgets"，但它不会。

似乎对 viewModel 存储的更改只会触发一次对 setters 的调用。

问题：

这是框架的特性还是我配置不正确。
如何重新配置 view/store/viewModel 以便每次 update/change 调用小部件 setter "setWidgets" 到商店，即何时;
- 数据已加载
- 商店已过滤
- 存储数据变化
- 商店更新

Answer 1

过滤商店不会更改 items 实例，它只会更改内容 - 这就是为什么不再调用 setWidgets 的原因。如果要响应store的数据变化，需要监听store的事件。

此外 - 绑定 widget.data.items 是个坏主意；那就是插入商店的内部结构。改为收听事件：

ExtJS 6 ViewModel 存储绑定和设置器

ExtJS 6 ViewModel store bindings and setters

extjs

extjs6

extjs6-classic