存储未将数据绑定到 Extjs 6 现代中的视图答案

【问题标题】：Store Not binding data to View in Extjs 6 modern存储未将数据绑定到 Extjs 6 现代中的视图
【发布时间】：2016-08-25 15:15:35
【问题描述】：

我只是在 extjs 6.0.2 应用程序的现代区域创建一个简单的列表示例，我创建了模型、存储和视图。将商店分配给列表组件后，它在视图中没有向我显示任何内容，但是我遵循了 Sencha 文档的说明。

模型 => Task.js

Ext.define('NewsApp.model.Task', {
extend: 'Ext.data.Model',
xtype:'Task',

fields: [
    { name: 'label',     type: 'string' },
    { name: 'done',      type: 'boolean', defaultValue:false }
]});

商店 => Tasks.js

Ext.define('NewsApp.store.Tasks', {
extend: 'Ext.data.Store',

requires:[
    'NewsApp.model.Task'
],

alias: 'store.tasks',

model: 'NewsApp.model.Task',

data : [
    {label: 'Make the bed'},
    {label: 'Go to Masjed'},
    {label: 'Take out the trash'},
    {label: 'Take Kids out'},
    {label: 'Go shopping'}
]});

查看 => about.js

Ext.define('NewsApp.view.about.About', {
extend: 'Ext.Panel',

requires: [
    'NewsApp.view.about.AboutController',
    'NewsApp.store.MobileOS',
    'Ext.dataview.List',
    'NewsApp.store.Tasks'
],
xtype: 'About',
controller: 'about',
fullscreen: true,
layout: 'vbox',
items: [
    {
        xtype: 'list',
        itemTpl: '<div class="todo-item">{label}</div>',
        store: 'NewsApp.store.Tasks',
        items: []
    }
]});

我还注意到运行时控制台中的警告告诉我

[WARN] 找不到指定的商店

我确信我在列表配置中正确地写了商店名称。

【问题讨论】：

标签： javascript extjs sencha-touch extjs6 extjs6-modern

【解决方案1】：

Store config 不能是字符串（类名），你应该创建它：

// ...
xtype: 'list',
store: Ext.create('NewsApp.store.Tasks'),
// ...

【讨论】：

【解决方案2】：

您做错的第一件事是通过NewsApp.store.Tasks 调用存储。这是不允许的，导致您出现错误。有很多方法可以实现存储在网格中。我建议的方法之一是使用 ID 调用。为您的商店分配 ID。

Store :

Ext.define('NewsApp.store.Tasks', {
extend: 'Ext.data.Store',

requires:[
   'NewsApp.model.Task'
] ,

alias: 'store.tasks',

model: 'NewsApp.model.Task',
id : 'NewTask',

 data : [
  {label: 'Make the bed'},
  {label: 'Go to Masjed'},
  {label: 'Take out the trash'},
  {label: 'Take Kids out'},
  {label: 'Go shopping'}
  ]});

然后你使用这个 ID 读取存储在网格中。

store : NewTask

请阅读此链接以更好地理解。这将帮助您准确地设计代码。Alias

欢迎提出任何建议。

【讨论】：

不起作用，仍然没有显示任何内容，得到相同的警告！
不确定到底缺少什么，但这也是获取商店的方法之一，因为我提供了链接来证明我的回答。如果我得到更多详细信息，会尽快回复您。

【解决方案3】：

商店加载了吗？你在使用 ViewModel 吗？如果是这样，在您的视图模型中，您可以设置商店：

stores: {
    task: {
        //Store reference
        type: 'tasks',

        //Auto load
        autoLoad: true
    }
}

在这种方法中，您甚至可以将商店绑定到视图：

bind: {store: 'task'}

【讨论】：