在视图中访问 extjs viewmodel store

Question

如何访问和设置视图模型中定义的商店？我可以设置在视图模型之外创建的商店。但我想将商店保留在视图模型中，并将该商店设置在网格视图中。

查看

Ext.define('MyApp.view.sample.Sample', {
extend: 'Ext.panel.Panel',

requires: [
    'MyApp.view.sample.SampleController',
    'MyApp.view.sample.SampleModel'
],

xtype: 'app-sample',
controller: 'sample',

viewModel: {
    type: 'sample'
},
items: [{
    xype: 'container',
        items: [
            {
                xtype: 'grid',
                store: 'sample', //This doesn't work. Store undefined error is thrown
                columns: [
                    {
                        text: 'Name',
                        dataIndex: 'name'
                    }
                ]
            }   
        ]
    }
]

});

视图模型

Ext.define('MyApp.view.sample.SampleModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.sample',
stores: {
    sample: {
       // storeId: 'sample', //doesn't work even if I uncomment this
    fields: [ 'name' ],
        data: [
            { name: 'Lisa' },
            { name: 'Bart' },
            { name: 'Homer',}
        ]
    }
}
});

Answer 1

您需要绑定您的商店（您需要为从 ViewModel 获取的所有属性执行此操作）并使用正确的 "binding" 表示法 http://www.sencha.com/forum/showthread.php?284474-ViewModel-stores-help

xtype: 'grid',
bind: {
    store: '{sample}' // curly braces if referencing from ViewModel
},
columns: [
...
]

您使用的是 ExtJS 5，对吗？我只提到因为你的一个标签是 'extjs4' 并且直到 ExtJS 5.

才引入 ViewModels

在视图中访问 extjs viewmodel store

Aceess extjs viewmodel store in view

extjs

extjs4

extjs-mvc

extjs5