javascript 如何将 ViewModel Store 绑定到 View？

How to bind ViewModel Store to View?

提问by Dave L.

I'm pretty new Ext JS and trying to embed a MultiSelectinside a Panel.

我是一个非常新的 Ext JS 并试图将MultiSelect嵌入到Panel 中。

The ViewModelhas a storesproperty as you can see here:

该ViewModel有一个stores属性，你可以在这里看到：

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 Viewlike this:

我想像这样绑定它View：

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

---

---

In this case, the storeends up as nullthough and no data is loaded into the widget. Instead of binding the store though, if I just hardcode it in the View, then it works.

在这种情况下，结果store就null好像没有数据加载到小部件中一样。如果我只是在视图中硬编码它，而不是绑定商店，那么它就可以工作。

Anyone see what the issue is?

任何人都看到问题是什么？

采纳答案by CD..

You can pass an empty object as a store additionally to binding the store, that way the initComponentwill work, for example:

您可以将一个空对象作为商店另外传递来绑定商店，这样就initComponent可以工作，例如：

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

Working example: https://fiddle.sencha.com/#fiddle/ur8

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

回答by Semih Gokceoglu

It's common issue. As long as you use proxy in store, you have to load store after viewrendered. Basically, add this to your View:

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

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

Edit:I didn't notice you already put the autoLoad: true. After some research, multiselect component has to get "store object" during render. That's why you get the 'autoCreated' error. I mean, before multiselect is created, its store has to be created. In your case, your multiselect component is created first, then store is binded to multiselect. To fix this issue please check this fiddle: https://fiddle.sencha.com/#fiddle/uqu

编辑：我没有注意到你已经把autoLoad: true. 经过一些研究，多选组件必须在渲染过程中获取“存储对象”。这就是您收到“autoCreated”错误的原因。我的意思是，在创建多选之前，必须创建它的商店。在您的情况下，首先创建您的多选组件，然后将存储绑定到多选。要解决此问题，请检查此小提琴：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'
                    });
                }  
            },