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

Question

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.ProductList.superclass.initComponent.apply(this, arguments);
    }
});

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

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

Old McStopher Old McStopher · Accepted Answer · 2011-07-12T21:20:02

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.

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

2 Answers