在视图中访问 extjs viewmodel 存储答案

【问题标题】：Aceess extjs viewmodel store in view在视图中访问 extjs viewmodel 存储
【发布时间】：2023-04-01 08:16:01
【问题描述】：

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

查看

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',}
        ]
    }
}
});

【问题讨论】：

标签： extjs extjs4 extjs-mvc extjs5

【解决方案1】：

您需要绑定您的商店（您需要对取自 ViewModel 的所有属性执行此操作）并使用正确的“绑定”表示法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”，而 ViewModel 直到 ExtJS 5 才引入。

【讨论】：

是的，我正在使用 ExtJS 5。谢谢