使用 tpl 標籤和 for 讀取物件屬性值中的陣列

來源於《sencha touch 權威指南》

-----------------------------

只摘抄app.js程式碼：

Ext.require(['Ext.form.Panel']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        var company = {
            name: '北京百度公司',
            email: 'info@baidu.com',
            address: '上地哈哈大廈',
            city: '北京',
            zip: '100086',
            employer:[{
                name: '張三',
                age: 27
            },{
                name: '李四',
                age: 30
            },{
                name: '王五',
                age: 25
            }]
        };

        var tpl = new Ext.XTemplate(
            '<p>公司：<br />',
            '<tpl for=".">',
                '名稱：{name}<br />',
                '地址：{city}{address}<br />',
                'email：{email}<br />',
                'zip：{zip}<br />',
                '<p>員工：',
                '<tpl for="employer">',
                    '<p>{#}.姓名：{name}，年齡：{age}',
                '</tpl>',
            '</tpl>'
        );

        var tplHtml = tpl.apply(company);

        var myPanel = Ext.create('Ext.Panel',{
            html: tplHtml
        });
        
        Ext.Viewport.add(myPanel);
    }
});