Store Not binding data to View in Extjs 6 modern

Question

I am just creating a simple list example in modern area of the extjs 6.0.2 app, i crated the model, store and the view. After assigning the store to the list component it shows nothing to me in the view however i followed the instructions of 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: []
    }
]});

i also noticed a warning in the console while running tells me

[WARN] The specified Store cannot be found

and i am sure i wrote the store name correctly in the list config.

Answer 1

Store config cannot be a string (class name), you should create it:

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