Sencha触摸列表与模型和商店(Sencha Touch List with Model and Store)

 我正在寻找带有模型和商店的sencha触摸列表的教程/源代码。 我正在面对Sencha Touch 2.2.1的一些问题。 
 
 模型： 
 
Ext.define("DeviceAPIFramework.model.OfferModel", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            { name: "description",  type: "string" },
            { name: "id", type: "string" }
        ]
    }
});
 
 商店： 
 
Ext.define("DeviceAPIFramework.model.OfferStore", {
    extend: "Ext.data.Store",
    config: {
        storeId: "offerStore",
        model:'DeviceAPIFramework.model.OfferModel'
    }
});
 
 控制器： 
 
offerStore.add({description: 'test', id: 'my id'});
Ext.ComponentQuery.query('#offersListHomeView')[0].update();
 
 视图： 
 
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}'
}
 
 图片： 
 
 
 从控制器执行代码后，会添加一个新行，但在列表的左上角还会添加一个奇怪的未定义文本。 有任何建议如何解决这个问题？ 
 
 我也不喜欢视图外的变量offerStore。 如果我把它放在控制器中，视图就会唠叨。 

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.

原文：https://stackoverflow.com/questions/17498040