Sencha 2.4.1 - List Not Displaying Items

Question

I am trying to populate a list with static data in store, using Sencha touch 2.4.1.

One main view contains the titlebar and the list. The list is trying to get the data from the store based model, Employee.

Following are the code snippets, I cannot find out where I am getting it wrong.

Employee List View

Ext.define('MyApp.view.EmpList',{
    extend: 'Ext.List',
    xtype: 'emp_list',
    config:{
         itemTpl: Ext.XTemplate('<span>{firstname}</span>')
    }
});

Employee Store

Ext.define('MyApp.store.Employee',{
extend: 'Ext.data.Store',
config:{
    storeId: 'emp_store',
    model: 'MyApp.model.Employee',
    emptyText: 'No Employees Yet!',
    data:[
        {firstname:'Danish', lastname:'Siddiqui', ranking:'1', is_manager:false},
        {firstname:'Danish', lastname:'Siddiqui1', ranking:'2', is_manager:false},
        {firstname:'Danish', lastname:'Siddiqui2', ranking:'3', is_manager:false},
        {firstname:'Danish', lastname:'Siddiqui3', ranking:'4', is_manager:false},
    ]
}

});

Employee Model

Ext.define('MyApp.model.Employee',{
extend: 'Ext.data.Model',
config: {
    fields:[
        {name: 'firstname',     type:'string'},
        {name: 'lastname',      type:'string'},
        {name: 'ranking',       type:'number'},
        {name: 'is_manager',    type:'boolean', defaultValue: false}
    ]
}

});

Main View

Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires:[
    'Ext.TitleBar'
],
config: {
    items: [
        {
            xtype: 'titlebar',
            title: 'Employe Information',
            items:[
                {
                    xtype: 'button',
                    ui: 'back',
                    text: 'back'
                }
            ]
        },
        {
            xtype: 'emp_list',
            store: 'emp_store'
        }
    ]

}
});

score 2 · Accepted Answer · answered Jan 21 '15 at 11:37

2

setting width and height properties of list works.

config:{
    width: '100%',
    height: '100%',
    itemTpl: Ext.XTemplate('<span>{firstname} &nbsp; {lastname}</span>'),
    store: 'emp_store'
}

answered Jan 21 '15 at 11:37

mdanishs

1,996
8
24
50

score 0 · Answer 2 · answered Jan 21 '15 at 09:19

0

Model in employee store should read 'MyApp.model.Employee', shouldn't it? If that does not help, see what you get in the store? Is the store loaded with expected records?

answered Jan 21 '15 at 09:19

Saki

5,827
2
15
15

corrected it, still not working, Ext.getStore('Employee') on console gives me undefined. – mdanishs Jan 21 '15 at 09:22

score 0 · Answer 3 · answered Jan 21 '15 at 11:55

As you mentioned, you had to give your list some size by adding height and width but also your store won't have loaded in the list due to your reference of an xtype rather than an instance of that xtype. http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.dataview.List-cfg-store

So your Main view should look like this:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    renderTo: Ext.getBody(),
    requires: ['Ext.TitleBar'],
    config: {
        fullscreen: true,
        items: [{
            xtype: 'titlebar',
            title: 'Employe Information',
            items: [{
                xtype: 'button',
                ui: 'back',
                text: 'back'
            }]
        }, {
            xtype: 'emp_list',
            store: Ext.create('MyApp.store.Employee'),
        }]

    }
});

and your EmpList like this:

Ext.define('MyApp.view.EmpList', {
    extend: 'Ext.List',
    xtype: 'emp_list',
    config: {
        width: '100%',
        height: '100%',
        itemTpl: Ext.XTemplate('<span>{firstname}</span>')
    }
});

Demo: https://fiddle.sencha.com/#fiddle/gqr

just giving the store id worked by the way, didn't need to use Ext.create for store. I am new to sencha and don't know why it works. I think it binds automatically, and instance is created during the launching phase, if we have listed our store in app.js in stores array ? — mdanishs, Jan 21 '15 at 13:12

score 0 · Answer 4 · answered Jan 23 '15 at 11:39

0

You will have to load the store and model inside the app.js file

stores: ['Employee'],
models: ['Employee']

answered Jan 23 '15 at 11:39

Dinkheller

4,631
5
39
67

forgot to mark the right answer before this one, problem was missing height and width attributes. – mdanishs Jan 23 '15 at 12:43
ok. good to hear it's solved. I just added this, because your last answer was the Ext.getStore could not find the store. – Dinkheller Jan 23 '15 at 16:41

Sencha 2.4.1 - List Not Displaying Items

4 Answers4