Question

I have a problem displaying my Ext.list component.
Here is my code:

Ext.define("iphone.view.customers.List", {

extend: 'Ext.List',
xtype: 'customersList',

config: {

    fullscreen: true,
    title: 'Customers List',
    ui: 'round',
    itemTpl: [ '{title}' ],

    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
}
});

When i launch the application the console produce this warning and nothing appears:

[WARN][Anonymous] [Ext.Loader] Synchronously loading ‘Ext.data.Store’;
consider adding ‘Ext.data.Store’ explicitly as a require of the
corresponding class

Thanks.

Answer 1

You see that warning because the best practice to do it in Sencha Touch 2 is:

• Define your Ext.data.Store with data config (inline data in this case)

• Suppose your defined Store is listStore, then use this config: store: listStore in your list definition

Hope this helps.

An example for your situation:

Ext.define('iphone.store.Customers', {
    extend: 'Ext.data.Store',

    config: {
        model: 'iphone.model.Customer',
            data: [
                      { title: 'Item 1' },
                      { title: 'Item 2' },
                      { title: 'Item 3' },
                      { title: 'Item 4' }
                    ]
    }
});

and list:

Ext.define("iphone.view.customers.List", {

extend: 'Ext.List',
xtype: 'customersList',

config: {

    fullscreen: true,
    title: 'Customers List',
    ui: 'round',
    itemTpl: [ '{title}' ],

    store: 'Customers'
}
});