ExtJs中XTemplate的用法

 

1、 自动填充数组和作用域切换

 

          Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '',
                  '',
                  '',
                  '',
                  '',
                  '
姓名
年龄
操作
{name}
{age}
'
                  ) ;
              var tplData=[
                  {name:'a',age:10},
                  {name:'b',age:20},
                  {name:'c',age:30},
                  {name:'d',age:40},
                  {name:'e',age:50},
              ];
              var panel=Ext.create('Ext.panel.Panel',{
                  title:'XTmplate',
                  width:1200,
                  height:300,
                  tpl:tpl,
                  renderTo:Ext.getBody()
              });
              tpl.append('tmp',tplData);
         });

 

代码中使用tpl 标签和for 运算符，本例中for运算符的值为“.”，表示指向当前对象，“..” 表示指向父对象，也可以直接写对象名，另外对数组的支持可以成批向模板中追加数据，

 

 

2、自动渲染简单数组

 

  
Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '',
                  '',
                  '',
                  '',
                  '',
                  '
姓名
年龄
COM
{#}
{.}
{.}
'
                  ) ;
             
             var array=['a','b','c','d','e'];
             tpl.append('tmp',array);

         }) ; 

 

 

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

 

 

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

 

 

    Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '',
                  '',
                  '', 
                      '',
                      '',
                      '',
                      '',
                      
                  '',
                  '',
                  '',
                  '
序号
姓名
工资
奖金
{[xindex]}
{[values.name]}
{[values.wage*parent.per]}
{[Math.round(values.wage*parent.per/xcount)]}
发薪时间
{[fm.date(new Date,"Y年m月d日")]}
工资总计
  
'
                  ) ;
              
              
             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