Sencha touch 2 Can';无法从存储中获取要加载到视图中的数据

Sencha touch 2 Can';无法从存储中获取要加载到视图中的数据,sencha-touch-2,Sencha Touch 2,我是Sencha Touch2的新手,在开始使用代理之前,我试图通过从一个简单的商店加载任意数据来启动我的应用程序。我的视图显示,但数据未填充。我见过这个问题,但没有什么能帮我解决。感谢您的帮助和耐心。非常感谢 我的型号 Ext.define('SenchaFirstApp.model.Distributors', { extend: 'Ext.data.Model', config: { fields: [

我是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'
                  }
            ]
                  }

       }  
});
distrestore.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'));
    }   

}))

您不需要创建商店的实例:

var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');
因为当您在应用程序中定义存储时

Ext.application({
    stores: ['DistributorStore'],
    ...
});
…它是自动为您创建的。要在视图中获取商店的引用,只需使用名称为的字符串:

{
    xtype: 'list',
    store: 'DistributorStore',
    ...
}
其他注释

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'));
    }   
  • 您也不需要使用
    .load()
    加载它,因为您已在存储配置中将
    自动加载设置为true
  • 您的视图应该扩展
    Ext.Container
    ,而不是
    Ext.dataview.dataview
    。DataView用于显示数据(基本上是一个抽象的
    Ext.List
    。因为您有一个列表作为一个项目,所以您可以将它放在一个容器中
  • 您已经在类和配置中设置了
    fullscreen:true
    。您只需要将其放在配置中,但这并不是必需的,因为您正在创建视图并将其插入到已全屏的
    Ext.Viewport
    (在
    app.js
    中)
  • 列表中不需要
    字段
    配置。应使用
    itemTpl
    为每一行创建模板

感谢您的详细回复。它帮助我澄清了一些问题。但是,我做了所有建议的更改,我的数据仍然没有显示,分隔两行的行现在已经消失。您能看到我仍然缺少的内容吗?再次感谢。我感谢您的帮助。我还没有找到一个可靠的方法示例我这样做是因为我将不同的示例组合在一起,这可能并不好:/I我使用了我的storeId('mainlist')在我的视图中引用我的存储,我得到了分隔符行,没有错误,但仍然没有数据。最后!出于某种原因,我将配置布局更改为“vbox”,我没有意识到我已经这样做了。一旦我将其更改为“fit”。它正在工作。现在我有一些严重的格式问题,但我现在有数据要处理。再次感谢r您的帮助!干得好!如果您将来遇到类似问题,请确保检查Chrome/Safari中的元素检查器。在那里您可以查看列表/数据/组件是否确实存在。如果确实存在,则您知道这是一个布局问题。:)