如何将 ViewModel Store 绑定到 View？

Question

我是 Ext JS 的新手，正在尝试嵌入 MultiSelect inside a Panel。

The ViewModel has a stores property as you can see here:

Ext.define('TEST.view.controls.search.SearchFilterModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.filter',
    data: {
        title: ''
    },
    stores: {
        test: {
            fields: ['id', 'name'],
            proxy: {
                type: 'ajax',
                url: 'api/test',
                reader: 'array'
            },
            autoLoad: true
        }
    }
});

I would like to bind that in my View like this:

viewModel: {
    type: 'filter'
},


layout: 'fit',
border: 1,
plain: true,
scrollable: 'y',
layout: 'fit',


bind: {
    title: '{title}',
},


items: {
    xtype: 'multiselect',
    scrollable: false,
    allowBlank: true,
    ddReorder: true,
    bind: {
        store: '{test}'
    },
    valueField: 'id',
    displayField: 'name'
}

在这种情况下，store 最终变为 null，并且没有数据加载到小部件中。但是，如果我只是在视图中对它进行硬编码，那么它就可以工作，而不是绑定商店。

有人知道问题出在哪里吗？

Answer 1

这是常见问题。只要你在 store 中使用代理，你就必须在 viewrendered 之后加载 store。基本上，将其添加到您的 View:

listeners: {
            afterrender: function(view) {
                this.getViewModel().getStore('{test}').load(); // this will provide proxy is being loaded
            }
           }

编辑： 我没注意到你已经放了 autoLoad: true 。经过一些研究，多选组件必须在渲染期间获得 "store object"。这就是您收到 'autoCreated' 错误的原因。我的意思是，在创建多选之前，必须创建它的商店。在您的情况下，首先创建您的多选组件，然后将商店绑定到多选。要解决此问题，请检查此 fiddle：https://fiddle.sencha.com/#fiddle/uqu

listeners: {
                afterrender: function(view) {
                    view.add({
                        xtype: 'multiselect',
                        scrollable: false,
                        allowBlank: true,
                        ddReorder: true,
                        fieldLabel: 'Multiselect',
                        store: view.getViewModel().getStore('test'), // comment to get autoCreated error
                        valueField: 'id',
                        displayField: 'name'
                    });
                }  
            },

Answer 2

除了绑定商店之外，您还可以传递一个空对象作为商店，这样 initComponent 将起作用，例如：

{
    xtype: 'multiselect',
    fieldLabel: 'Multiselect',
    store: {},
    bind: {
        store: '{test}'
    },
    valueField: 'id',
    displayField: 'name'
}

工作示例：https://fiddle.sencha.com/#fiddle/ur8

如何将 ViewModel Store 绑定到 View？

How to bind ViewModel Store to View?

javascript

extjs

mvvm

extjs6