ExtJs中XTemplate使用(转）

转自http://www.studyofnet.com/news/408.html

本文导读：XTemplate是Ext.Template扩展的新类，它支持高级功能的模板类，如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量，直接执行代码和更多的功能。XTemplate有些特殊的标签和内建的操作运算符，是模板创建时生成的，不属于API条目的一部分。下面介绍ExtJs中XTemplate使用方法

Ext.XTemplate 用法

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

 

HTML 代码   复制

          Ext.onReady(function(){

              var tpl=new Ext.XTemplate(

                 '<table border=1>',

                  '<tr><td>姓名</td><td>年龄</td><td>操作</td></tr>',

                  '<tpl for=".">',

                  '<tr><td>{name}</td><td>{age}</td><td></td></tr>',

                  '</tpl>',

                  '</table>'

                  ) ;

              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、在子模板中访问父对象

 

HTML 代码   复制

         Ext.onReady(function(){

              var tpl=new Ext.XTemplate(

                 '<table border=1>',

                  '<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',

                  '<tpl for="emps">',

                  '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',

                  '</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);

         });

子对象中访问父对象的属性要使用“parent.”。

3、自动渲染简单数组

 

HTML 代码   复制

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);

         });

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

4、使用基本逻辑判断

 

HTML 代码   复制

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 &gt; 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; 表示<）

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

 

HTML 代码   复制

    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： 循环模板时候的总循环次数

6、在Extjs 组件中使用模板

 

HTML 代码   复制

    Ext.onReady(function(){

              var tpl=new Ext.XTemplate(

                          '<div class="x-combo-list{[xindex%2==0?"even":"odd"]}">',

                          '{#}:{[this.check(values)]}</div>',

                          {

                              check:function(values){

                                  if(values.value>2){

                                      return "<font color=red>"+values.item+"</font>";

                                  }else{

                                      return "<font color=blue>"+values.item+"</font>";

                                  }

                              }

                          }

                  ) ;

             Ext.regModel('ItemInfo',{

                 fields:['item','value']

             })

             var panel=Ext.create('Ext.panel.Panel',{

                 title:'数组使用模板',

                 renderTo:Ext.getBody(),

                 height:500,

                 width:1200,

                 items:[

                     {

                         xtype:'combo',

                         fieldLabel:'邮编',

                         displayField:'item',

                         valueField:'value',

                         labelSeparator:':',

                         listConfig:{

                             itemTpl:tpl

                         },

                         editable:false,

                         queryMode:'local',

                         store:new Ext.data.Store({

                             model:'ItemInfo',

                             fields:['item','value'],

                             data:[

                                 {item:'a',value:1},

                                 {item:'b',value:2},

                                 {item:'c',value:3},

                                 {item:'d',value:4},

                                 {item:'e',value:5},

                                 {item:'f',value:6},

                             ]

                         })

                     }

                 ]

             });

             tpl.append('tmp',tplData);

         });

许多组件中都可以使用模板，他们一般表现为tpl配置项，通过为该配置提供相应的模板就可以改变组件默认的表现方式，可以进行一些个性化的定制。

7、模板格式化函数实例

var myTpl = new Ext.Template(
'<div>{content:ellipsis(50)}<br/><a href="{moreLink}">Read More</a></div>'
);

常用的模板格式化函数的列表

* ellipsis(length) - 对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。适用于只显示前N位的字符，然后提供详细页面的链接。
* undef -检查一个值是否为underfined，如果是的转换为空值
* htmlEncode - 转换(&, <, >, and ') 字符

* trim - 对一段文本的前后多余的空格裁剪
* substr(start, length) - 返回一个从指定位置开始的指定长度的子字符串。
* lowercase - 返回一个字符串，该字符串中的字母被转换为小写字母。
* uppercase - 返回一个字符串，该字符串中的字母被转换为大写字母。

* capitalize - 返回一个字符串，该字符串中的第一个字母转化为大写字母，剩余的为小写。
* usMoney - 格式化数字到美元货币。如：$10.97
* date[(format)] - 将一个日期解析成为一个特定格式模式的日期。如日期字符串不输入，默认为“月/日/年”
* stripTags - 剥去变量的所有HTML标签

亦可以创建自定义的格式化函数

具体做法是，在模板的实例上加入新的方法，继而在模板上调用，格式化的函数应该像这样的：{VARIABLE:this.<formatfunction></formatfunction>}"

这是一个简单的实例，对模板实例加入一个"parseJson "的新函数。

例如

 

JScript 代码   复制

 var tplFun = new Ext.Template(

             '<table border=1 cellpadding=0 cellspacing = 0>',

             '<tr><td width=90 >姓名</td>',

             '<td width=120>{name}</td></tr>',

             '<tr><td width=90 >年龄</td>',

             '<td width=120>{age}</td></tr>',

             '<tr><td width=90 >身高</td>',

             '<td width=120>{stature:this.parseJson()}</td></tr>',

             '</table>'

         );

         var data = {
             name : 'tom',
             age : 24,
             stature : {
                 num : 170,
                 unit : '厘米'
             }
         }

         tplFun.parseJson = function(json){
             return json.num + json.unit;
         }
 tplFun.append('tpl-table',data);