問題描述
Đại diện cửa hàng ExtJS Costum (ExtJS Costum store representation)
I wander if there is any ExtJS way that I can load store with data and after it is loaded I can create in master panel other my components (custom panel) to show that data in my specific way?
I want display data from store in panel with my custom components
參考解法
方法 1:
You have two options:
- If you only need to display the data then DataView is tailored for this task.
- If your really need a component (ie, something that encapsulates user interaction and not just display), then you need to create this component and as your store loads create a component per record and add it to your master panel.
To copy the docs example of dataview (option 1):
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()
});