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.

score 2 · Accepted Answer · answered Aug 25 '16 at 15:49

2

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

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

answered Aug 25 '16 at 15:49

Darin Kolev

3,401
13
31
46

score 1 · Answer 2 · answered Aug 26 '16 at 05:26

First thing which you are doing wrong is calling store by NewsApp.store.Tasks. Which is not permissible and in result you geeting error. There are many way to achieve store in grid. One of the way which I would suggest is call by using ID. Assign ID to your store.

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

and then you use this ID read store in grid.

store : NewTask

Please read this link to understand better. This will help you exactly the way you designing your code.Alias

Any suggestion is welcome.

does not work and still show nothing getting the same warning! — Mohamed A. Shebl, Aug 28 '16 at 08:34
Not Sure what exactly is missing but this is also one of the way to fetch store, as I given link to justify my answer. Will get back to you if I get more details. — UDID, Aug 29 '16 at 06:16

score 0 · Answer 3 · answered Mar 03 '17 at 08:27

Is the store loaded? Are you using ViewModels? If so, in your viewmodel, you can set the store(s):

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

        //Auto load
        autoLoad: true
    }
}

In this aproach, you can even bind your store to the view:

bind: {store: 'task'}

Store Not binding data to View in Extjs 6 modern

3 Answers3