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:*
*, caption:*Drawing & Charts* },
{ src:*
*, caption:*Advanced Data* },
{ src:*
*, caption:*Overhauled Theme* },
{ src:*
*, 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>*
);
var dataview = Ext.create(*Ext.view.View*, {
store: Ext.data.StoreManager.lookup(*imagesStore*),
tpl: imageTpl,
itemSelector: *div.thumb-wrap*,
emptyText: *No images available*,
renderTo: Ext.getBody()
});
console.log(dataview.getNodes());