7

我是相当新的 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好像没有数据加载到小部件中。但是，如果我只是在视图中对其进行硬编码，而不是绑定商店，那么它就可以工作。

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

4

2 回答 2

6

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

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

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

于 2015-10-04T05:37:46.933 回答
1

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

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

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