假设我们要显示的数据是这样:
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