Sencha Touch 2將商店數據呈現給面板

Question

我正在通過商店從JSON Feed中讀取數據。我的問題是我無法在視圖面板中顯示數據。

我的面板的代碼如下：

Ext.define('Layouts.view.Node', { 
    extend: 'Ext.Panel', 
    xtype: 'node', 

    config: { 
     title: 'Node Data', 
     styleHtmlContent: true, 
     scrollable: 'vertical', 

     tpl: new Ext.XTemplate(
      '<div>TITLE: {title}</div>' 
     ), 
    }, 

}); 

的商店代碼如下：

Ext.define('Layouts.store.Node', { 
    extend: 'Ext.data.Store', 

    config: { 

     storeId: 'Node', 

     autoLoad: true, 
     model: 'Layouts.model.Node', 

     proxy: { 
      type: 'ajax', 
      url: 'http://178.79.128.76/revivaltimes/app/content/0', 

      reader: { 
       type: 'json', 
       rootProperty: 'JSON', 
      } 
     }, 

    },//config 

}); 

和型號代碼如下：

Ext.define('Layouts.model.Node', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'title', 
      'body', 
     ] 
    }, 

}); 

我不知道爲什麼我的觀點出現空白。

Answer 1

看一看在DataView組件：http://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.DataView

的數據視圖是從商店呈現數據的正確方法。你的看法會成爲這樣的事情（未測試的代碼）：

Ext.define('Layouts.view.Node', { 
    extend: 'Ext.dataview.DataView', 
    xtype: 'node', 

    config: { 
     title: 'Node Data', 
     styleHtmlContent: true, 
     scrollable: 'vertical', 
     store: 'Node', 

     itemTpl: new Ext.XTemplate(
      '<div>TITLE: {title}</div>' 
     ), 
    }, 

}); 

注意用於指定的項目模板使用itemTpl的。