var tpl = Ext.create('Ext.Template',
    '<div>',
        'Hello {name}!',
    '</div>');
tpl.apply({
    name: 'Nigel',
    dob: new Date(1962, 5, 17)
});
var tpl = Ext.create('Ext.XTemplate',
    '<div>',
        '{name} was born on {dob:date("d-M-Y")}',
    '</div>',
    '<div>',
        '{name} earns {salary:currency}',
    '</div>',
    '<div>',
        '{name} knows {skills:this.unorderedList}',
    '</div>', {
        unorderedList: function(v) {
            var result = "<ul>";

            for (var i = 0; i < v.length; i++) {
                result += "<li>" + v[i] + "</li>";
            }

            return result + "</ul>";
        }
    });
tpl.apply({
    name: 'Nigel',
    dob: new Date(1962, 5, 17),
    salary: 25000,
    skills: ['C++', 'Cobol', 'CSS', 'ExtJS', 'Fortran', 'HTML/DOM', 'Java', 'Javascript', 'Sencha Touch']
});
var tpl = Ext.create('Ext.XTemplate',
    '<div>',
        '{name} is {[new Date().getFullYear() - values.dob.getFullYear()]} years old.',
    '</div>');
tpl.apply({
    name: 'Nigel',
    dob: new Date(1962, 5, 17)
});
var tpl = Ext.create('Ext.XTemplate',
    '<div>',
        '{name} is {[this.getAge(values.dob)]} years old.',
    '</div>', {

    getAge: function(dob) {
        var year = 1000 * 60 * 60 * 24 * 365.25,
            now = new Date(),
            f = dob.getMonth() * 10 + dob.getDate(),
            f1 = now.getMonth() * 10 + now.getDate(),
            age = now.getFullYear() - dob.getFullYear();

        return (f1 > f) ? age : age - 1;
    }
});
tpl.apply({
    name: 'Nigel',
    dob: new Date(1962, 5, 17)
});
var tpl = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div>{#}/{[xcount]}. {name} is {[this.getAge(values.dob)]} years old.</div>',
    '</tpl>', {

    getAge: function(dob) {
        var year = 1000 * 60 * 60 * 24 * 365.25,
            now = new Date(),
            f = dob.getMonth() * 10 + dob.getDate(),
            f1 = now.getMonth() * 10 + now.getDate(),
            age = now.getFullYear() - dob.getFullYear();

        return (f1 > f) ? age : age - 1;
    }
});
tpl.apply([{
    name: 'Nigel',
    dob: new Date(1962, 5, 17),
    sex: 'M'
}, {
    name: 'Faye',
    dob: new Date(1964, 1, 22),
    sex: 'F'
}]);
var tpl = Ext.create('Ext.XTemplate',
    '<div>',
        '{name} was born on {dob:date("d-M-Y")}',
    '</div>',
    '<div>',
        '{name} earns {salary:currency}',
    '</div>',
    '<div>',
        '{name} knows <ul>',
            '<tpl for="skills">',
                '<li>{.}</li>',
            '</tpl>',
        '</ul>',
    '</div>');
tpl.apply({
    name: 'Nigel',
    dob: new Date(1962, 5, 17),
    salary: 25000,
    skills: ['C++', 'Cobol', 'CSS', 'ExtJS', 'Fortran', 'HTML/DOM', 'Java', 'Javascript', 'Sencha Touch']
});
var tpl = Ext.create('Ext.XTemplate',
    '<div>',
        '{name} was born on {dob:date("d-M-Y")}',
    '</div>',
    '<div>',
        '{name}\'s job:',
        '<table class="job">',
            '<tpl for="job">',
                '<tr><td class="job-prop">Title:</td><td>{title}</td></tr>',
                '<tr><td class="job-prop">Started:</td><td>{startDate:date("d-M-Y")}</td></tr>',
                '<tr><td class="job-prop">Salary:</td><td>{salary:currency}</td></tr>',
            '</tpl>',
        '</table>',
    '</div>');
tpl.apply({
    name: 'Nigel',
    dob: new Date(1962, 5, 17),
    job: {
        title: 'Sr. Software Architect',
        startDate: new Date(2011, 0, 10),
        salary: 25000,
    }
});
var tpl = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div>',
            '{name} will have a ',
                '<tpl if="sex==&quot;M&quot;">Beer</tpl>',
                '<tpl if="sex==&quot;F&quot;">Wine</tpl>',
        '</div>',
    '</tpl>');
tpl.apply([{
    name: 'Nigel',
    dob: new Date(1962, 5, 17),
    sex: 'M'
}, {
    name: 'Faye',
    dob: new Date(1964, 1, 22),
    sex: 'F'
}]);
var familyTree = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="family-member {[this.getClass(values, xindex, xcount)]}">',
            '{name}',
            '{[this.renderChildren(values.children)]}',
        '</div>',
    '</tpl>', {

    renderChildren: function(children) {
        var result = '';
        if (children && children.length) {
            this.level = (this.level||0) + 1;
            result = this.apply(children);
            this.level--;
        }
        return result;
    },
    getClass: function(values, index, count) {
        if (!Ext.isDefined(this.level)) {
            this.level = 0;
        }

        var result = (index == 1) ? 'first ' : '';
        switch (this.level) {
            case 0: result += "adult";
                    break;
            case 1: result += "child";
                    break;
            case 2: result += "grandchild";
        }
        if (values.children && values.children.length) {
            result += ' has-children';
        }
        return result + ((index == count) ? ' last' : '');
    }
});
familyTree.apply([{
    name: 'Nigel',
    dob: new Date(1962, 5, 17),
    sex: 'M'
}, {
    name: 'Faye',
    dob: new Date(1964, 1, 22),
    sex: 'F',
    children: [{
        name: 'Theodore',
        dob: new Date(1989, 4, 12),
        sex: 'M'
    }, {
        name: 'Alisdair',
        dob: new Date(1987, 5, 6),
        sex: 'M',
        children: [{
            name: 'Luke',
            dob: new Date(2009, 8, 20),
            sex: 'M'
        }]
    }]
}]);