Sencha touch itemtpl详解

假设我们要显示的数据是这样：

var data = {
    name: 'Don Griffin',
    title: 'Senior Technomage',
    company: 'Sencha Inc.',
    drinks: ['Coffee', 'Water', 'More Coffee'],
    kids: [
        { name: 'Aubrey',  age: 17 },
        { name: 'Joshua',  age: 13 },
        { name: 'Cale',    age: 10 },
        { name: 'Nikol',   age: 5 },
        { name: 'Solomon', age: 0 }
    ]
};

 自动填充数组

<tpl for=".">...</tpl>       // 遍历根节点
<tpl for="foo">...</tpl>     // 遍历foo节点
<tpl for="foo.bar">...</tpl> // 遍历foo.bar节点

 遍历根节点实例

var tpl = new Ext.XTemplate(
    '<p>Kids: ',
    '<tpl for=".">',       // 处理data.kids几点
        '<p>{#}. {name}</p>',  // use current array index to autonumber
    '</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object

 

遍历子节点数组
var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);  // pass the root node of the data object