学习笔记---ExtJS4.0模板

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

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

 

Template:

创建方法：

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

参数：

Html ：即html代码片段；

Config：其有两个配置项

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

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

 

返回值: Ext.Template类

 

例如：

Ext.onReady(function(){
   var tpl = new Ext.XTemplate(
      '',
					      '',
					      '',
					      '',
					      '',
					      '
				
				姓名{name}
				
				年龄{age}
				
				性别{sex}
				
				工作时间{workdate:this.cusFormat()}
				
				',
      '
      '
      '
      '
      '
       {
         compiled : true,
         cusFormat : function(date,o){
            return Ext.Date.format(date,'Y年m月d日');
         }
       }
    );
   //tpl.cusFormat = function()
   tpl.overwrite('tpl-table',{'name' : '小王', 'age' : 26, 'sex' : '男', 'workdate' : new Date()});
});

HTML中添加一个id为tpl-table的层即可

 效果如下：

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

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

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

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

   如果格式化函数需要传递参数，需要使用’（）’括起来；

 

XTemplate: 超级模板

功能：

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

    2、  可以执行判断语句。

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

    4、  有values、parent、xindex和xcount等4个内建模板变量，用于特殊处理。

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

创建方法：

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

 

使用for循环:例子如下：

Var tpl = new Ext. XTemplate(
‘…’,
‘<tpl for=”.”>’,
…,
‘</tpl>’,
‘…’
);
Var tplDate = [{},{},{}];
Tpl.append(‘div-id’,tplData);

本例中：“.”表示的是当前对象，”..”表示的是父对象。当然也可以写对象名字；

 

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

Var tpl = new Ext. XTemplate(
‘…’,
‘<tpl for=”emps”>’,
…,
‘<td>{parent.companyName}</td>’,
‘</tpl>’,
‘…’
);
Var tplData = {
         companyName : ‘ABC有限公司’,
         emps ：［{},{},{}］
}
Tpl.appwend(‘div-id’,tplDate);

数组索引和简单运算支持

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

使用基本的条件逻辑判断

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

下面给一个综合例子：

Ext.onReady(function(){
  var tpl = new Ext.XTemplate(
     '',
					      '',
					      '',
				
					      '',
					      '',
				
					      '',
					      '',
				
					      '',
				
					      '',
					      '',
				
					      '',
					      '',
				
					      '
				
				序号姓名年龄性别工作时间工资收入
				
				
				{#}{name}{age}{sex}{workdate:this.cusFormat()}
				
				
				{wage * .9}
				
				
				
				{wage * .9}
				
				
				
				
				
				',
      '
      '',
      '
      '',
      '
      '',
      '',
      '
      '',
      '
      '',
      '
      {
         compiled : true,
         cusFormat : function(date,o){
           return Ext.Date.format(date,'Y年m月d日');
         }
      }
  );
  var tplData = [
     {'name' : '小王', 'age' : 26, 'sex' : '男', 'workdate' : new Date(),'wage' : 1000},
     {'name' : '小李', 'age' : 27, 'sex' : '女', 'workdate' : new Date(),'wage' : 3000}
  ];
  tpl.overwrite('tpl-table',tplData);
});

效果如下：

常用的格式化输出函数：

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：返回指定日期中月份的第一天是星期几，返回值是0到6中的数字，0表示星期天。

9、  getLastDayOfMonth：与getFirstDayOfMonth相反，返回指定日期中月份最后一天是星期几；

10、getFirstDateOfMonth：返回指定日期中其月份的第一天的日期值；

11、getLastDateOfMonth：返回指定日期中其月份的最后一天的日期值；

 

Ext.util.Format:

1、  thousandSeperator：千位的分隔号，默认值为逗号；

2、  decimalSeperator:小数点符号，默认值为小数点；

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

4、  currencySign：货币符号，默认为$,本地化中为￥

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

6、  undef：如果值为undefined，将其转换为空字符串，否则返回值；

7、  substr（start,[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