Chinaunix首页 | 论坛 | 博客
  • 博客访问: 373954
  • 博文数量: 48
  • 博客积分: 1032
  • 博客等级: 上士
  • 技术积分: 1256
  • 用 户 组: 普通用户
  • 注册时间: 2012-05-19 13:24
文章分类

全部博文(48)

文章存档

2014年(3)

2013年(23)

2012年(22)

分类: Web开发

2013-04-10 15:34:20

Extjs4 使用了统一的渲染管道,让渲染过程变得更加的条理化,更容易扩展。渲染管道的方式只有一个,即基于Xtemplates对象。

Extjs中有TemplateXTemplate两个模板类,Template是基础模板,提供一些基础功能,XTemplate是从Template中扩展而来,具有更加强大的功能。

 

Template:

创建方法:

Var template = new Ext.Template( html, {[config]} )

参数:

Html :即html代码片段;

Config:其有两个配置项

Compiled : 布尔值,决定模板是否进行编译,默认为undefined,不编译,true则编译;

DisableFormats :布尔值,决定是否使用格式化函数,默认为false,使用格式化函数,如果模板中没有使用格式化函数的需求,可以设置为true,提高运行速度。

 

返回值: Ext.Template

 

例如:

点击(此处)折叠或打开

  1. Ext.onReady(function(){
  2.    var tpl = new Ext.XTemplate(
  3.       '',
  4.       '
  5. ',
  6.       '
  7. ',
  8.       '
  9. ',
  10.       '
  11. ',
  12.       '
  13. 姓名{name}
    年龄{age}
    性别{sex}
    工作时间{workdate:this.cusFormat()}
    '
    ,
  14.        {
  15.          compiled : true,
  16.          cusFormat : function(date,o){
  17.             return Ext.Date.format(date,'Y年m月d日');
  18.          }
  19.        }
  20.     );
  21.    //tpl.cusFormat = function()
  22.    tpl.overwrite('tpl-table',{'name' : '小王', 'age' : 26, 'sex' : '男', 'workdate' : new Date()});
  23. });

HTML中添加一个idtpl-table的层即可

 效果如下:


模板中,要替换的位置需要使用大括号’{}’做标记,括号里面可以是数组或者字符串;

   如果是数字,表示使用的是数组的索引,需要传入的数据是一个数组;

   如果是字符串,表示使用的是对象中属性的名字,需要传入的是一个JSON对象;

   如果需要输出格式化数据,需要在索引或者名称之后加上冒号’:’,然后是格式化函数的名称;

   如果格式化函数需要传递参数,需要使用()括起来;

 

XTemplate: 超级模板

功能:

    1、  可以自动填充数组数据。

    2、  可以执行判断语句。

    3、  Template对象一样进行简单的数学运算以及执行实例内的方法。

    4、  valuesparentxindexxcount4个内建模板变量,用于特殊处理。

    5、  可以根据需要自定义操作

创建方法:

    Var XTemplate = new Ext.XTemplate( html, {[config]} )

 

使用for循环:例子如下:

点击(此处)折叠或打开

  1. Var tpl = new Ext. XTemplate(
  2. ‘…’,
  3. <tpl for=.>,
  4. ,
  5. </tpl>,
  6. ‘…’
  7. );
  8. Var tplDate = [{},{},{}];
  9. Tpl.append(‘div-id’,tplData);

本例中:“.”表示的是当前对象,”..”表示的是父对象。当然也可以写对象名字;

 

在子模板中访问父对象:通过parent标识符访问父对象{parent.companyName},例如

点击(此处)折叠或打开

  1. Var tpl = new Ext. XTemplate(
  2. ‘…’,
  3. <tpl for=”emps”>,
  4. ,
  5. <td>{parent.companyName}</td>,
  6. </tpl>,
  7. ‘…’
  8. );
  9. Var tplData = {
  10.          companyName : ‘ABC有限公司’,
  11.          emps :[{},{},{}
  12. }
  13. Tpl.appwend(‘div-id’,tplDate);

数组索引和简单运算支持

    当处理数组时用特殊符号{#}表示当前数组索引加1(即从1开始而不是0开始),如果元素可以转换为数字,模板也支持基本的算术运算(+,-,*,%)。

使用基本的条件逻辑判断

    Ext.XTemplate模板提供了标签和if运算符,通过if运算符实现条件判断,决定哪一部分需要渲染,注意这里没有else操作法,使用两个条件相反的if运算符代替;逻辑运算符需要进行编码(例如:>:表示>; <:表示<)

下面给一个综合例子:


点击(此处)折叠或打开

  1. Ext.onReady(function(){
  2.   var tpl = new Ext.XTemplate(
  3.      '',
  4.       '
  5. ',
  6.       '',
  7.       '
  8. ',
  9.       '',
  10.       '
  11. ',
  12.       '',
  13.       '',
  14.       '
  15. ',
  16.       '',
  17.       '
  18. ',
  19.       '',
  20.       '
  21. 序号姓名年龄性别工作时间工资收入
    {#}{name}{age}{sex}{workdate:this.cusFormat()} {wage * .9} {wage * .9}
    '
    ,
  22.       {
  23.          compiled : true,
  24.          cusFormat : function(date,o){
  25.            return Ext.Date.format(date,'Y年m月d日');
  26.          }
  27.       }
  28.   );
  29.   var tplData = [
  30.      {'name' : '小王', 'age' : 26, 'sex' : '男', 'workdate' : new Date(),'wage' : 1000},
  31.      {'name' : '小李', 'age' : 27, 'sex' : '女', 'workdate' : new Date(),'wage' : 3000}
  32.   ];
  33.   tpl.overwrite('tpl-table',tplData);
  34. });
效果如下:


常用的格式化输出函数:

Ext.String:

1、  trim:清除字符串开头和结尾的空白字符;

2、  capitalize:将字符串的开头字母转换为大写;

3、  ellipsis:根据指定的长度截断字符串,并在后面加上省略号;

4、  toggle:将字符串在两个值之间进行切换,比如控制按钮的显示开始停止

5、  leftPad:输出固定长度的字符串,常用于为数字添加前导字符‘0‘;

6、  format:将各类数据格式转换为字字符串并输出;在字符串中使用大括号定位替换位置,大括号中的数字表示用参数中的哪一个参数进行替换;

eg

Ext.String.format(“我叫{0},出生于(1)张三’,1985);

---à输出:我叫张三,出生于1985

 

Ext.Number:

1、  canstrain:检查数字是否在指定范围内。如果数字小于最小值,返回最小值;如果数字大于最大值,返回最大值,否则返回数字本身;

2、  snap:该方法主要用于  MultiSlider取值;

3、  toFixed:根据指定的位数格式化数字的小数点后的输出位数;

4、  from:如果值不是数字,返回指定的默认值,否则返回值;

 

Ext.Date:

1、  defaultFormat:默认日期格式,默认值为”m/d/Y”

2、  add:可进行日期运算,例如Ext.Date.add(new Date(“2011/1/20”),Ext.Date.DAY,20);结果为:Date {Web Feb 09 2011 00:00:00 GMT+0800}

3、  between:检查指定日期是否在指定的范围内,如果在返回true,否则返回false

4、  format:格式化日期输出。常用的有:

     d:使用两位数字表示天数,前导字符为0

     j: 不使用2位数字显示天数,因而不加前导字符0

     m:使用两位数字显示月份,前导字符为0

     n:不使用2位数字显示月份,因而不加前导字符0

     Y:使用4位数字显示年份

     y:使用2位数字显示年份

     G:使用24小时格式显示小时,没有前导字符0

           H:使用24小时格式显示小时,有前导字符0

     i: 显示分钟,有前导字符0

     s:显示秒,有前导字符0

5、  getDayOfYear:返回指定日期中其年份的天数。0~365

6、  getWeekOfYear:返回指定日期中年份的周数。

7、  isLeapYear:判断年份是否为闰年,如果是返回true

8、  getFirstDayOfMonth:返回指定日期中月份的第一天是星期几,返回值是06中的数字,0表示星期天。

9、  getLastDayOfMonth:与getFirstDayOfMonth相反,返回指定日期中月份最后一天是星期几;

10getFirstDateOfMonth:返回指定日期中其月份的第一天的日期值;

11getLastDateOfMonth:返回指定日期中其月份的最后一天的日期值;

 

Ext.util.Format:

1、  thousandSeperator:千位的分隔号,默认值为逗号;

2、  decimalSeperator:小数点符号,默认值为小数点;

3、  currencyPrecision:货币精度,默认为2

4、  currencySign:货币符号,默认为$,本地化中为¥

5、  currencyAtEnd:在货币数字后面附加货币的单位,默认值为false

6、  undef:如果值为undefined,将其转换为空字符串,否则返回值;

7、  substrstart,[length]):从指定的位置开始获取指定长度的字符串,如果忽略length则返回从指定位置一直到结尾的字符串;

例如:源码中对capitalize[将字符首字母转换为大写]的定义:

capitalize: function(string) {

    return string.charAt(0).toUpperCase() + string.substr(1);

}
//首先截取字符串的首字母将其转换为大写,再与从第二个字符到结束的字符串结合返回新的字符串;在
javascript中字符串是不能被改变的只能返回新的字符串

8、stripTags(value):清楚所有html标记,返回字符串

9、stripScripts(value):string:清楚所有的script标记

10、fileSize(size):格式化输出文件大小,如果文件大小小于1024

 

 

 

 

 

 

阅读(3179) | 评论(0) | 转发(0) |
0

上一篇:网页中的DTD与META

下一篇:PHP快速入门

给主人留下些什么吧!~~