Required DataView configurations added but still getting error? (tpl: vs. itemTpl)

I'm working with the MVC example here, and have bypassed the PhoneGap contacts data and replaced it with my own model and store. When I add a list to a panel, I point it to myApp.stores.products. A list is a DataView, so tpl, store, and itemSelector are required, but the example omits itemSelector and uses itemTpl instead of tpl...

items: [{
        xtype: 'list',
        store: myApp.stores.products,
        itemTpl: '{productName}',
        onItemDisclosure: function (record) {
            //Ext.dispatch({
            //    controller: myApp.controllers.products,
            //    action: 'show',
            //    id: record.getId()
            //});
        }
    }]

Naturally, I get a console warning as follows:

Uncaught DataView requires tpl, store and itemSelector configurations to be defined.

So, I change the configuration to what I know it should be and now get an error ...

items: [{
    xtype: 'list',
    store: myApp.stores.products,
    tpl: '{productName}',
    itemSelector: 'div.productView',
    onItemDisclosure: function (record) {
        //Ext.dispatch({
        //    controller: myApp.controllers.products,
        //    action: 'show',
        //    id: record.getId()
        //});
    }
}]

Uncaught Error: Ext.List: itemTpl is a required configuration.

So, which is it? itemTpl or tpl? And why does the Ext.List not know which to use? I even tried adding both tpl and itemTpl, just to be safe and still got the firstmost of the two errors above.

NOTE: This is what it looks like in the panel context:

myApp.views.ProductList = Ext.extend(Ext.Panel, {
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Products'
    }],
    items: [{
        xtype: 'list',
        store: myApp.stores.products,
        tpl: '{productName}',
        itemSelector: 'div.productView',
        onItemDisclosure: function (record) {
            //Ext.dispatch({
            //    controller: myApp.controllers.products,
            //    action: 'show',
            //    id: record.getId()
            //});
        }
    }],
    initComponent: function() {
        myApp.stores.products.load();
        myApp.views.ProductLis开发者_如何学Pythont.superclass.initComponent.apply(this, arguments);
    }
});

UPDATE: I think it's barfing on the initComponent.apply()...

myApp.views.ProductList.superclass.initComponent.apply(this, arguments);

Okay. Putting a breakpoint in the Sencha Touch initComponent function, I see that it had nothing to do with the tpl or itemTpl at all. Somehow, my store is undefined. Now onto a new mystery...

The store was undefined at the time this panel and list were being created. So, the final fix ended up being switching the order that the .js files were included in the index.html. Now works like a lucky charm.

I had the same problem, but for me the problem was coming from the fact that there were a mistake in the variable name used to call the proxy : I put a uppercase when a lowercase was need. Exemple with your code : I used myApp.stores.Products instead of myApp.stores.products.

But it takes times to find...