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

ExtJs中XTemplate使用(转)的更多相关文章

  1. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  2. extjs中form.reset(true)出现的bug修复

    在之前的开发extjs中,用ext.form.panel开发了一个表单,当使用了reset(true)之后,再次使用getRecord()却还是可以得到值,该值为上一次的旧值,查看了api文档,再结合 ...

  3. ExtJs中xtype与组件类的对应表

    from:http://blog.163.com/jx_dream/blog/static/117056627201223091021410/ 核心提示:我们在使用 ExtJs 创建组件时最容易理解的 ...

  4. Extjs中给同一个GridPanel中的事件添加参数的方法

    Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({            text:'启用',            scope ...

  5. extjs中的下载并对文件重命名功能的实现

    在小白的学习extjs的过程中,如果需要了解多文件的上传功能,也可以查看小白的上篇随笔,希望给大家帮助.http://www.cnblogs.com/wangqc/p/extjsFileUpload. ...

  6. 【extjs】 Extjs中的Ext.grid.Panel隐藏列会显示在表头中解决方法

    在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中,但是这个一般没有什么用处,只是用于后台取值的作用,感兴趣的朋友可以了解下啊,希望本文对你有所帮助   在Ex ...

  7. 转: ExtJS中xtype一览

    转: ExtJS中xtype一览 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycl ...

  8. jquery,extjs中的extend用法小结

    在jquery中,extend其实在做插件时还是用的比较多的,今天同时小结jquery和ext js中 的extend用法,先来看jquery中的. 1)  extend(dest,src1,src2 ...

  9. extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)

    在公司做的一个OA项目中,曾经就遇到了这样的一个问题:(我是在jsp中的div中将js render到div中去的)第一次访问此界面的时候,formpanel上的组件能正常显示,不刷新整个页面的前提下 ...

随机推荐

  1. sencha touch routes(路由) 传递中文参数

    使用路由的时候可以传递参数 如下: index.html#eaterylist/335/61/61/61/B/商户名称 其中6个参数依次是:商户编号/公众账号/微信号/校验号/服务类型/商户名称 因为 ...

  2. Struts2之web元素访问与模板包含与默认Action使用

    上一篇为大家介绍了如何使用Action进行参数接收,以及简单的表单验证,本篇为大家介绍一下关于Action访问web元素的三种方式(request.session.application):模板包含( ...

  3. windows中cmd--->进入到别的磁盘

    方法:直接敲:  f:     不要加cd,在同一个磁盘的盘符下用cd.

  4. SSH使用秘钥和别名登陆服务器

    手工配置免密码及别名登陆 第一步:生成秘钥 $ ssh-keygen -t rsa 第二步:上传公钥到目标服务器 $ ssh-copy-id -i ~/.ssh/id_rsa.pub <romt ...

  5. Docker关联使用的一些工具:Clip名字服务(转载)

    Clip名字服务 Clip(http://blog.puppeter.com/read.php?7)是一个名字服务C/S架构,它将传统的IP管理维度替换为名字服务即有意义可记忆的String.Clip ...

  6. Mavlink - 无人机通讯协议

    http://qgroundcontrol.org/mavlink/start mavlink协议介绍https://pixhawk.ethz.ch/mavlink/ 消息简介 MAVLink简介 M ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

    写在前面 上篇文章简单介绍了项目的结构,这篇文章将实现用户的注册.当然关于漂亮的ui,这在追后再去添加了,先将功能实现.也许代码中有不合适的地方,也只有在之后慢慢去优化了. 系列文章 [EF]vs15 ...

  8. POJ 1849 - Two - [DFS][树形DP]

    Time Limit: 1000MS Memory Limit: 30000K Description The city consists of intersections and streets t ...

  9. MySQL在linux上的二进制安装方法

    建组.建用户: [root@dbking mysql]# groupadd mysql [root@dbking mysql]# useradd -g mysql mysql 解压安装程序: [roo ...

  10. Python面向对象:获取对象信息

    学习笔记内容简介: 获取对象属性和方法的函数: type(): 判断对象类型 isinstance() : 判断class的类型 dir() : 获得一个对象的所有属性和方法 把属性和方法列出来是不够 ...