無法獲取視圖以在Sencha Touch中顯示存儲數據

Question

我試圖在Sencha-Touch 2中顯示簡單數據的列表。由於某種原因，它不顯示數據，我無法弄清楚。我得到兩個標題欄：正確的標題與「最近的帖子」和下面的空白。我不知道爲什麼會這樣。也許這與顯示屏的其他部分相沖突？

Ext.define('GS.view.NewBlog',{ 
    extend: 'Ext.navigation.View', 
    xtype: 'newblog', 
    requires: [ 
     'Ext.dataview.List', 
      'Ext.TitleBar' 
    ], 

config: { 
    title: 'Blog', 
    iconCls: 'star', 
      items: { 
        docked: 'top', 
        xtype: 'titlebar', 
        title: 'Recent Posts' 
      }, // end items 
      store: { 
       fields: ['title','author'], 
       data: [ 
        {title: 'This is the first Title', author: 'John Smith'}, 
        {title: 'This is the second title', author: 'Jane Doe'} 
       ] // end data 
      } // end store 

    }, // end config 
itemTpl: '{title}' 
}); 

Answer 1

Ext.define('GS.store.Posts', {` 

    extend: 'Ext.data.Store',` 
    config: { 
     data: [ 
      { 
       title: 'This is the first Title', 
       author: 'John Smith' 
      }, 
      { 
       title: 'This is the second title', 
       author: 'Jane Doe' 
      } 
     ], 
     storeId: 'Posts', 
     fields: [ 
      { 
       name: 'title' 
      }, 
      { 
       name: 'author' 
      } 
     ] 
    } 
}); 

使用存儲定義與列表面板

1. 標題欄顯示兩次，因爲您正在使用Ext.navigation.View，默認情況下它具有標題欄。並且您正在項目中添加一個標題欄。

2. 現在在配置中的項目內定義store和itemtpl。您可以單獨定義商店並提及商店內商店的ID。

   項目：[{ 的xtype： '清單'， 商店：「商店ID放在這裏， itemTpl： '{TITLE}' }]

Answer 2

您需要定義一個商店：

Ext.define('GS.view.NewBlog', { 
    extend: 'Ext.Panel', 
    alias: 'widget.NewBlog', 

    config: { 
     layout: { 
      type: 'card' 
     }, 
     items: [ 
      { 
       xtype: 'toolbar', 
       docked: 'top', 
       title: 'Recent Posts' 
      }, 
      { 
       xtype: 'list', 
       itemTpl: [ 
        '<div>{title} - {author}</div>' 
       ], 
       store: 'Posts' 
      } 
     ] 
    } 

}); 

你app.js：

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    stores: [ 
     'Posts' 
    ], 
    views: [ 
     'NewBlog' 
    ], 
    name: 'GS', 

    launch: function() { 

     Ext.create('GS.view.NewBlog', {fullscreen: true}); 
    } 

});