Javascript 存储未绑定数据以在Extjs 6中查看

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

Model=>Task.js

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

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

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

View=>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: []
    }
]});

Ext.define（'NewsApp.view.about.about'{
扩展：“Ext.Panel”，
要求：[
'NewsApp.view.about.AboutController'，
'NewsApp.store.MobileOS'，
“Ext.dataview.List”，
'NewsApp.store.Tasks'
],
xtype:'关于'，
控制器：“关于”，
全屏：对，
布局：“vbox”，
项目：[
{
xtype:'列表'，
itemTpl:“{label}”，
store:'NewsApp.store.Tasks'，
项目：[]
}
]});

在运行时，我还注意到控制台中有一条警告

[警告]找不到指定的存储

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

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

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

---

您做错的第一件事是通过

NewsApp.store.Tasks

调用store。这是不允许的，并且会导致错误。有很多方法可以实现网格存储。我建议的一种方法是使用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

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

欢迎提出任何建议

商店是否已加载？ 您使用的是ViewModels吗？如果是，可以在viewmodel中设置存储：

在本方案中，您甚至可以将存储绑定到视图：

bind: {store: 'task'}

---

不起作用，但仍然没有显示任何内容得到相同的警告！不确定到底遗漏了什么，但这也是获取存储的方法之一，因为我给出了链接来证明我的答案。如果我得到更多细节，我会给你回复的。

bind: {store: 'task'}