Published Sep 17, 2010 | The Sencha Dev Team | FAQ | Medium
Last Updated Jul 11, 2011

Mess around with XTemplates on the Firebug console command line. You always need a <tpl> to process anything. The parameter for="." means execute the nested template for each element (be it an Array element, or an Object property) of the object being processed:

new Ext.XTemplate('<tpl for=".">{foo}</tpl>').apply({foo:'hello'})
<tpl>s can be nested to match the structure:
 
new Ext.XTemplate(
    '<tpl for=".">{foo}<tpl for="bar"> from {nested}</tpl></tpl>').apply({
        foo:'hello',
        bar: {nested: 'deeper'}
    })

Add events/listeners to Template

• See this thread

Template with Button

• Here we use the DataView's click event, and check the target is a button.
• Note, ids must be unique. Make sure if you specify an id it will be unique.

Ext.onReady(function(){
    var data = [["xx", "aa", "fff", "cco"]];
 
    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<img src="{url}" title="{name}">',
            '<span>Name: {name} {vorname}, {alter} Jahre',
            '<input type="button" name="addButton" value="Add"/></div>',
        '</tpl>'
    );
 
     var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'name'},
           {name: 'url'},
           {name: 'vorname'},
           {name: 'alter'}
        ],
        data: data
    });
 
    var panel = new Ext.Panel({
        frame: true,
        width:535,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'',
        items: new Ext.DataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            multiSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
            listeners:{
                click: function(dataView, index, node, e ){
                    var target = e.getTarget();
                    if(target.name == "addButton"){
                        alert("doStuff");
                    }
                }
            }
        })
 
    });
    panel.render('xx');
});