Магазин Не обязательные данные для просмотра в Extjs 6 modern

Question

Я просто создаю простой пример списка в современной области приложения 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 } 
]}); 

магазин => 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] Указанный магазин не может быть найден

и я уверен, что я написал название магазина правильно в списке конфигурации.

Answer 1

Store config не может быть строка (имя класса), вы должны создать его:

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

Answer 2

Первая вещь, которую вы делаете неправильно звонит магазин по NewsApp.store.Tasks. Это недопустимо, и в результате вы получаете ошибку. Есть много способов добиться сохранения в сетке. Один из способов, который я предлагаю, - это вызов с использованием идентификатора. Назначьте идентификатор в своем магазине.

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

, а затем вы используете этот магазин чтения идентификаторов в сетке.

store : NewTask

Пожалуйста, прочитайте эту ссылку, чтобы лучше понять. Это поможет вам точно в том, как вы разрабатываете свой код. Alias

Любое предложение приветствуется.

Answer 3

Является ли магазин загружен? Вы используете ViewModels? Если да, то в вашей ViewModel, вы можете установить магазин (ы):

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

     //Auto load 
     autoLoad: true 
    } 
} 

В этом ПОДХОД, вы даже можете связать свой магазин с точки зрения:

bind: {store: 'task'}