Question

我是一个非常新的Ext JS并尝试在MultiSelect内嵌入Panel。

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

我想在我的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'
}

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

任何人都能看到问题所在？

Answer 1

您可以将空对象作为商店传递给绑定商店，这样initComponent将起作用，例如：

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

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

Answer 2

这是一个常见的问题。只要您在商店中使用代理，就必须在查看后加载存储。基本上，将其添加到您的View：

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

修改：我没有注意到你已经放了autoLoad: true。经过一些研究，多选组件必须得到＆＃34;存储对象＆＃34;在渲染过程中这就是为什么你得到自动化处理的原因＆＃39;错误。我的意思是，在创建multiselect之前，必须创建它的商店。在您的情况下，首先创建多选组件，然后将存储绑定到多选。要解决此问题，请检查此小提琴：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'
                    });
                }  
            },

如何将ViewModel Store绑定到View？

2 个答案: