存储不将数据绑定到Extjs 6 modern中的View

时间:2016-08-25 15:15:35

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

我只是在extjs 6.0.2应用程序的现代区域中创建一个简单的列表示例,我创建了模型,存储和视图。将商店分配给列表组件后,它在视图中对我没有任何显示,但是我按照Sencha文档的说明进行操作。

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

查看=> 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]无法找到指定的商店

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

3 个答案:

答案 0 :(得分:2)

Store config不能是字符串(类名),您应该创建它:

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

答案 1 :(得分:1)

你做错的第一件事是通过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

欢迎任何建议。

答案 2 :(得分:0)

商店是否装满了? 你在使用ViewModels吗?如果是这样,在您的viewmodel中,您可以设置商店:

bind: {store: 'task'}

在这个方法中,您甚至可以将商店绑定到视图:

{{1}}