ExtJS Costum商店代表

Question

我徘徊，如果有任何ExtJS的方式，我可以加載與數據存儲和加載後，我可以在主面板中創建其他我的組件（自定義面板）以我的具體方式顯示該數據？

我想從商店的平板顯示的數據與我的自定義組件

Answer 1

你有兩個選擇：

1. 如果你只需要顯示的數據，然後DataView爲該定製任務。
2. 如果你真的需要一個組件（即封裝用戶交互而不僅僅是顯示），那麼你需要創建這個組件，並且當你的商店負載爲每個記錄創建一個組件並將它添加到你的主面板。

要複製的數據視圖（選項1）的docs例如：

Ext.define('Image', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name:'src', type:'string' }, 
     { name:'caption', type:'string' } 
    ] 
}); 

Ext.create('Ext.data.Store', { 
    id:'imagesStore', 
    model: 'Image', 
    data: [ 
     { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' }, 
     { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' }, 
     { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' }, 
     { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' } 
    ] 
}); 

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">', 
     '<div style="margin-bottom: 10px;" class="thumb-wrap">', 
      '<img src="{src}" />', 
      '<br/><span>{caption}</span>', 
     '</div>', 
    '</tpl>' 
); 

Ext.create('Ext.view.View', { 
    store: Ext.data.StoreManager.lookup('imagesStore'), 
    tpl: imageTpl, 
    itemSelector: 'div.thumb-wrap', 
    emptyText: 'No images available', 
    renderTo: Ext.getBody() 
});