The source code

    Ext.onReady(function(){

        var data = {
            name: 'Jack Slocum',
            company: 'Ext JS, LLC',
            address: '4 Red Bulls Drive',
            city: 'Cleveland',
            state: 'Ohio',
            zip: '44102',
            kids: [{
                name: 'Sara Grace',
                age:3
            },{
                name: 'Zachary',
                age:2
            },{
                name: 'John James',
                age:0
            }]
        };

        var p = new Ext.Panel({
            title: 'Basic Template',
            width: 300,
            html: 'Apply the template to see results here',
            tbar: [{
                text: 'Apply Template',
                handler: function(){

                    var tpl = new Ext.Template(
                        'Name: {name}',
                        'Company: {company}',
                        'Location: {city}, {state}'
                    );

                    tpl.overwrite(p.body, data);
                    p.body.highlight('#c3daf9', {block:true});
                }
            }],

            renderTo: document.body
        });

        var p2 = new Ext.Panel({
            title: 'XTemplate',
            width: 300,
            html: 'Apply the template to see results here',
            tbar: [{
                text: 'Apply Template',
                handler: function(){

                    var tpl = new Ext.XTemplate(
                        'Name: {name}',
                        'Company: {company}',
                        'Location: {city}, {state}',
                        'Kids: ',
                        '',
                            '{#}. {parent.name}\'s kid - {name}',
                        ''
                    );
                    tpl.overwrite(p2.body, data);
                    p2.body.highlight('#c3daf9', {block:true});
                }
            }],

            renderTo: document.body
        });
    });