ExtJs中XTemplate实例

一、自动渲染简单数组

 

  
Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '<table border=1>',
                  '<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',
                  '<tpl for=".">',
                  '<tr><td>{#}</td><td>{.}</td><td>{.}</td></tr>',
                  '</tpl>',
                  '</table>'
                  ) ;
             
             var array=['a','b','c','d','e'];
             tpl.append('tmp',array);

         }) ; 

 

其中：{#} 代表行号，{.} 代表数组内容

 

 

二、使用基本逻辑判断

 

Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '<table border=1>',
                  '<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',
                  '<tpl for="emps">',
                  '<tpl if="age > 20">',
                  '<tr><td>{#}</td><td>{name}</td><td>{age}</td></tr>',
                  '</tpl>',
                  '</tpl>',
                  '</table>'
                  ) ;
             
              var company={
                  companyName:'IBM',
                  emps:[
                      {name:'a',age:10},
                      {name:'b',age:20},
                      {name:'c',age:30},
                      {name:'d',age:40},
                      {name:'e',age:50},
                  ]
              };    
             tpl.append('tmp',company);
 
         });

其中：（&gt; 表示> , &lt; 表示<）

 

 

三、在模板中执行任意代码

 

    Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '<table border=1 class=title>',
                  '<tr><td>序号</td><td>姓名</td><td>工资</td><td>奖金</td></tr>',
                  '<tpl for="emps">', 
                      '<tr class="{[xindex % 2==0? "even":"odd" ]}">',
                      '<td>{[xindex]}</td><td>{[values.name]}</td>',
                      '<td>{[values.wage*parent.per]}</td>',
                      '<td>{[Math.round(values.wage*parent.per/xcount)]}</td></tr>',
                      
                  '</tpl>',
                  '<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
                  '<tr><td>工资总计</td><td colspan=3>  </td></tr>',
                  '</table>'
                  ) ;
              
              
             var tplData={
                 per:0.9,
                 emps:[
                     {name:'a',wage:1000},
                     {name:'b',wage:200},
                     {name:'c',wage:100},
                     {name:'d',wage:10},
                     {name:'e',wage:897},
                     {name:'f',wage:110}
                 ]
             };
             tpl.append('tmp',tplData);
             
              
         });

其中：

values : 当前作用域下的值对象，通过切换子模板的作用域可以改变其中的值

parent：父模板的值对象

xindex：循环模板的索引

xcount： 循环模板时候的总循环次数

 

 

 

文章转载自：    ExtJs中XTemplate使用    http://www.studyofnet.com/news/408.html