无法从商店获取我的数据以在视图中加载

时间:2012-09-11 18:36:32

标签: sencha-touch-2

我是Sencha Touch2的新手,我试图通过在继续使用代理之前从一个简单的商店加载任意数据来启动我的应用程序。我的观点显示但数据没有填充。我已经看到了这个问题,但没有任何帮助我解决的问题。任何帮助和耐心表示赞赏。谢谢你!

我的模特

Ext.define('SenchaFirstApp.model.Distributors', {
       extend: 'Ext.data.Model',
       config: {
             fields: [
                {name: 't', type: 'string'},
                {name: 'distr', type: 'string'},
                {name: 'group', type: 'string'},
                {name: 'site', type: 'string'},
                {name: 'status', type: 'string'},
                {name: 'actuve', type: 'string'},
                {name: 'assigned', type: 'string'},
                {name: 'state', type: 'string'},
                {name: 'schedule', type: 'string'},
                {name: 'finished', type: 'string'} ],
       }
       });

我的观点

var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');
Ext.define('SenchaFirstApp.view.DistributorView', {
           extend: 'Ext.dataview.DataView',
           requires: [distrStore, 'Ext.data.Store', 'Ext.dataview.List'],
           model: 'SenchaFirstApp.model.Distributors',
           xtype: 'mainlist',
           fullscreen: true,

       config:
       {
           fullscreen: true,
           layout: 'fit',
           border: 5,
           title: 'Distributors',
           html: 'My datalist',
           autoLoad: true,

           items:{
               title: 'Setup',
               xtype:'list',
               store: distrStore,
               fields: [
                  {
                      text: 'T',
                      width: 1,
                      sortable: false,
                      hideable: false,
                      dataIndex: 't'
                  },
                  {
                      text: 'Distributor',
                      width: 50,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'distr'
                  },
                  {
                      text: 'Group',
                      width: 20,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'group'
                  },
                  {
                      text: 'Site Name',
                      width: 20,
                      sortable: false,
                      hideable: false,
                      dataIndex: 't'
                  },
                  {
                      text: 'Status',
                      width: 5,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'status'
                  },
                  {
                      text: 'Active',
                      width: 5,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'active'
                  },
                  {
                      text: 'State',
                      width: 2,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'state'
                  },
                  {
                      text: 'Scheduled',
                      width: 10,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'schedule'
                  },
                  {
                      text: 'Finished',
                      width: 10,
                      sortable: false,
                      hideable: false,
                      dataIndex: 'finished'
                  }
            ]
                  }

       }  
});
  

distrStore.load();

我的商店

Ext.define('SenchaFirstApp.store.DistributorStore', {
                        extend: 'Ext.data.Store',
                        requires: ['SenchaFirstApp.model.Distributors', 'Ext.dataview.DataView'],

                        config: {
                        //  xtype: 'distrlist',
                            storeId: 'mainlist',
                        model: 'SenchaFirstApp.model.Distributors',
                        autoLoad: true,
                        data: [
                               {t: 'S', distr: 'Smart Systems', site: 'Smart Temps', status: "done", active: 'Yes', assigned: 'Me', state: 'IN',                                                                        schedule: 'today', finished: 'today'},
                               {t: 'I', distr: 'People', site: 'This One', status: "done", active: 'Yes', assigned: 'You', state: 'NC', schedule:                                                   'yesterday', finished: 'tomorrow'}
                              ]}});

app.js

Ext.Loader.setConfig({enabled:true});
Ext.application({
    name: 'SenchaFirstApp',
    stores: ['DistributorStore'],
    models: ['Distributors'],
    views: ['DistributorView'],
    requires: ['SenchaFirstApp.view.DistributorView', 'Ext.dataview.DataView', 'SenchaFirstApp.model.Distributors', 'SenchaFirstApp.store.DistributorStore',    'Ext.dataview.List'],

launch: function() {    
    Ext.fly('appLoadingIndicator');
    Ext.Viewport.add(Ext.create('SenchaFirstApp.view.DistributorView'));
    }   

});

1 个答案:

答案 0 :(得分:2)

您无需创建商店实例:

var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');

因为当您在应用程序中定义商店时......

Ext.application({
    stores: ['DistributorStore'],
    ...
});

...它会自动为您创建。要在视图中获取商店的引用,只需使用名称为

的字符串
{
    xtype: 'list',
    store: 'DistributorStore',
    ...
}

其他说明

  • 您也不需要使用.load()加载它,因为您已在商店配置中将autoLoad设置为true。
  • 您的观点应该延伸Ext.Container,而不是Ext.dataview.DataView。 DataView用于显示数据(基本上是一个抽象的Ext.List。因为你有一个列表作为项目,你可以把它放在一个容器里。
  • 您已在课程和配置中设置了fullscreen: true。你只需要将它放在配置中 - 但它并不是真正必要的,因为你正在创建视图并将其插入已经全屏的Ext.Viewport(在你的app.js中)。
  • 您的列表中不需要fields配置。您应该使用itemTpl为每行创建模板。