您的位置：首页 > Web前端 > extjs > 正文

ExtJs中XTemplate使用

更多时间：2014-4-23 类别：Web前端浏览量：12557

ExtJs中XTemplate使用

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

（> 表示> , < 表示<）

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( 
                          '<li class="x-combo-list{[xindex%2==0?"even":"odd"]}">',
                           
                          '{#}:{[this.check(values)]}</li>',
                          {
                              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(
'<li>{content:ellipsis(50)}<br/><a href="{moreLink}">Read More</a></li>'
);

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

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

标签：XTemplate 模板类

上一篇：text-overflow超出部分用省略号

下一篇：border:0和border:none的区别

您可能感兴趣

ExtJs中XTemplate使用

ExtJs中XTemplate使用

热门推荐

排行榜