list isn't loading in panel in sencha touch

Question

I am trying to load a List in a Panel but i am getting following error

Uncaught TypeError: Cannot call method 'substring' of undefined 

here is my ProfileContainer.js which contains the List

Ext.define('demo.view.ProfileContainer', {
    extend: 'Ext.Panel',
    xtype: 'profilecontainer',
   // requires: [ 'Ext.TitleBar', 'demo.view.ProfileList' ],
    requires: [ 'Ext.TitleBar' ],
    config: {
        items: [{
            xtype: 'titlebar',
            title: 'demo',
            cls: 'bms-bg'
        }, {
            xtype: 'profilelist'
        }]
    }
});

here is the code of ProfileList.js

Ext.define('demo.view.ProfileList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.profilelist',
    requires: ['demo.store.ProfileStore'],
    config: {
        store: 'ProfileStore',
        itemTpl: '{name}',
    }
});

here is my ProfileStore.js

Ext.define('demo.store.ProfileStore',{

    extend:'Ext.data.Store',

    config: {
        model: 'demo.model.ProfileModel',
        data:[

            { name: 'John Rambo' },
            { name: 'Brad Pitt'}

        ]
    }
});

and ProfileModel.js

Ext.define('demo.model.ProfileModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [

            { name: 'name', type: 'string' }
        ]
    }
});

but my list isnt loading into panel and i am getting above mentioned error

Answer 1

xtypes are alias defined as widget

So you need to define them like:

alias:'widget.profilecontainer',

or

alias:'widget.profilelist',

---

Some information on require and uses :

You have dependencies between your classes which need to be resolved. This is normally done by the buildtool or if you don't run it by yourself.

Dependencies are one of the reasons why you use require or uses where require can be threated as strict because it ensure that the class is there as soon as it get required

And here comes a the difference: because this is not valid if you lazy load. At this time the required class will be available after the class is defined. The build tool cleans this up places the required classes before the class definition

while uses can be treated as lose because it only ensure that the class exist the time the Ext.onReady get called.

Normally this wan't give you headache but if the class definition requires that dependencies get resolved at definition time it will blow up when lacy loaded. If you now the dependency (xtype) that is causing this you can try to load it manually by using

Ext.require('class'); 

which need to get placed before the class definition.