在 Extjs 6 modern 中存储不绑定数据到视图
Store Not binding data to View in Extjs 6 modern
我只是在 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] The specified Store cannot be found
而且我确定我在列表配置中正确地写了商店名称。
Store config 不能是字符串(class 名称),您应该创建它:
// ...
xtype: 'list',
store: Ext.create('NewsApp.store.Tasks'),
// ...
您做错的第一件事是通过 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
请阅读此 link 以更好地理解。这将完全按照您设计代码的方式帮助您。Alias
欢迎任何建议。
商店加载了吗?
你在使用视图模型吗?如果是这样,在您的视图模型中,您可以设置商店:
stores: {
task: {
//Store reference
type: 'tasks',
//Auto load
autoLoad: true
}
}
在这种方法中,您甚至可以将商店绑定到视图:
bind: {store: 'task'}
我只是在 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] The specified Store cannot be found
而且我确定我在列表配置中正确地写了商店名称。
Store config 不能是字符串(class 名称),您应该创建它:
// ...
xtype: 'list',
store: Ext.create('NewsApp.store.Tasks'),
// ...
您做错的第一件事是通过 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
请阅读此 link 以更好地理解。这将完全按照您设计代码的方式帮助您。Alias
欢迎任何建议。
商店加载了吗? 你在使用视图模型吗?如果是这样,在您的视图模型中,您可以设置商店:
stores: {
task: {
//Store reference
type: 'tasks',
//Auto load
autoLoad: true
}
}
在这种方法中,您甚至可以将商店绑定到视图:
bind: {store: 'task'}