sencha Touch 2.4 学习之 XTemplate模板

最新推荐文章于 2024-10-11 17:39:47 发布

diyu8056

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ae6623/p/4422325.html

版权

XTemplate模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css">
        <script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
        <title>DEMO</title>
        <script type="text/javascript"> 
      Ext.onReady(function() { 
        //数据源 
        var data = { 
            name: 'Tommy Maintz', 
            title: 'Lead Developer', 
            company: 'Sencha Inc.', email: 'tommy@sencha.com', address: '5 Cups Drive', city: 'Palo Alto', state: 'CA', zip: '44102', drinks: ['Coffee', 'Soda', 'Water'], kids: [{ name: 'son1', age:3 , sunzi : [{name : 'sunzi1'},{name:'sunzi2'}] },{ name: 'son2', age:2 , sunzi : [{name : 'sunzi3'},{name:'sunzi4'}] },{ name: 'son3', age:0 , sunzi : [{name : 'sunzi5'},{name:'sunzi6'}] }] }; //呈现组件 var mypanel = new Ext.Panel({ id: "mypanel", width: 300, frame: true, height: 100, title: "XTemplate简单示例", renderTo: Ext.getBody() }); /* //创建模板 var tpl = new Ext.XTemplate( '<p>Kids: ', '<tpl for="kids.sunzi">', // process the data.kids node '<p>{#}. {name}</p>', // use current array index to autonumber '<p>Dad: {parent.name}</p>', '</tpl></p>' ); */ //创建模板 var tpl = new Ext.XTemplate( '<p>Me: ', '<tpl for=".">', // data '<p>{#}. {name}</p>', '<tpl for="kids">', // kids me '<p>----son: {name}</p>', // som '<p>----Dad: {parent.name}</p>', '<tpl for="sunzi">',//sunzi '<p>------sunzi: {name}</p>', '<p>------Dad: {parent.name}</p>', '</tpl>', '</tpl>', '<p>Yeye: {parent.name}</p>', //yeye '</tpl></p>' ); //重写绑定模板 tpl.overwrite('tpl', data); // pass the kids property of the data object  }); </script> </head> <body> <div id="tpl"> </div> </body> </html>

效果：