CODEWITHSUNDEEP
javascriptextjsmodel-view-controllersencha-touchsencha-touch-2
mdanishs
mdanishs

Reputation: 2036

Sencha 2.4.1 - List Not Displaying Items

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

}
});

Upvotes: 1

Views: 629

Answers (4)

Dinkheller
Dinkheller

Reputation: 5054

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

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

Upvotes: 0

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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

Upvotes: 0

mdanishs
mdanishs

Reputation: 2036

setting width and height properties of list works.

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

Upvotes: 2

Saki
Saki

Reputation: 5856

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?

Upvotes: 0

Related Questions