Using XTemplates with a DataView

XTemplates can be bound to a Ext.data.Store by using the DataView class.

var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
		'name', 
		'url', 
		{name:'size', type: 'float'}, 
		{name:'lastmod', type:'date', dateFormat:'timestamp'}
	]
});
store.load();

var tpl = new Ext.XTemplate(
	'<tpl for=".">',
        '<div class="thumb-wrap" id="{name}">',
	    '<div class="thumb"><img src="{url}" title="{name}"></div>',
	    '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

var dv = new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No images to display',
        prepareData: function(data){
            data.shortName = Ext.util.Format.ellipsis(data.name, 15);
            data.sizeString = Ext.util.Format.fileSize(data.size);
            data.dateString = data.lastmod.format("m/d/Y g:i a");
            return data;
        }
    });