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'
});

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

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

此时，小部件设置器＆＃34; setWidgets＆＃34;按预期调用。但是，当我使用商店＆＃34; filterBy＆＃34;过滤商店时方法，我期待小部件设置器＆＃34; setWidgets＆＃34;被称为，但它不是。

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

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

查看重新加载商店数据是否会触发小部件设置器＆＃34; setWidgets＆＃34;，但它没有。

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

问题：

这是框架的一个功能还是我配置错误。
如何重新配置view / store / viewModel以便小部件设置器＆＃34; setWidgets＆＃34;每次更新/更改商店时都会调用，即; <; p>
- 已加载数据
- 商店已过滤
- 存储数据更改
- 商店更新

Answer 1

过滤商店不会更改items实例，只会更改内容 - 这就是没有再次调用setWidgets的原因。如果您想要响应商店中的数据更改，您需要收听商店中的事件。

另外 - 绑定widget.data.items是一个坏主意;这是插入商店的内部结构。聆听事件：

ExtJS 6 ViewModel存储绑定和setter

1 个答案: