Sencha Touch List with Model and Store

Question

I am looking for a tutorial / sourcecode for a sencha touch list with a model and a store. I am facing some issues with Sencha Touch 2.2.1.

Model:

Ext.define("DeviceAPIFramework.model.OfferModel", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            { name: "description",  type: "string" },
            { name: "id", type: "string" }
        ]
    }
});

Store:

Ext.define("DeviceAPIFramework.model.OfferStore", {
    extend: "Ext.data.Store",
    config: {
        storeId: "offerStore",
        model:'DeviceAPIFramework.model.OfferModel'
    }
});

Controller:

offerStore.add({description: 'test', id: 'my id'});
Ext.ComponentQuery.query('#offersListHomeView')[0].update();

View:

Ext.require("DeviceAPIFramework.model.OfferStore");
var offerStore = Ext.create("DeviceAPIFramework.model.OfferStore");

Ext.define ........... 
{
    xtype: 'list',
    width: Ext.os.deviceType == 'Phone' ? null : 1200,
    height: Ext.os.deviceType == 'Phone' ? null : 350,
    title: 'test',
    itemId: 'offersListHomeView',
    store: offerStore,
    itemTpl: '{description} {id}'
}

Image:

After executing the code from the controller, a new row gets appended, but also a weird undefined text on the upper left corner of my list. Any suggestions how to fix this issue?

I also don't like the variable offerStore outside the view. If I put it in the controller, the view is nagging.

Answer 1

The undefined is coming from this line:

Ext.ComponentQuery.query('#offersListHomeView')[0].update();

update is decrapted(I wrote it, because I was developing once with an old Sencha Touch version and this update was necessary) and will call setHtml(), because we are passing no arguments it is settings "undefined", which will be shown in our view. In the new sencha version, you can simply delete this line.

I also managed the global store problem with this code in the controller:

launch: function() {
    this.offersStore = Ext.create('Ext.data.Store', {
        model: 'DeviceAPIFramework.model.OfferModel'
    });

    Ext.ComponentQuery.query('#offersListHomeView')[0].setStore(this.offersStore);
},