Sencha Inc. | HTML5 Apps

Template FAQ

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

This FAQ is most relevant to Ext JS, any version.

This article is currently due for review
We suspect that this article may be out-of-date or contain incorrect information.
But we are constantly editing articles, so we promise we will get to this one soon.

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

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');
});
Share this post:
Leave a reply

Written by The Sencha Dev Team

Commenting is not available in this channel entry.