ExtJS4学习笔记八－－Template的使用

1、append方法 

Javascript代码  

1. var tpl = new Ext.Template(//定义模板  
2.     '<table  border=1 cellpadding=0 cellspacing = 0>',  
3.     '<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',  
4.     '<tr><td>年龄</td><td>{1}</td></tr>',  
5.     '<tr><td>性别</td><td>{2}</td></tr>',  
6.     '</table>'  
7. )  
8. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
9. tpl.append('tpl-table',['小王',25,'男']);  

2、overwrite方法： 

Javascript代码  

1. var tpl = new Ext.Template(//定义模板  
2.     '<table  border=1 cellpadding=0 cellspacing = 0>',  
3.     '<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',  
4.     '<tr><td>年龄</td><td>{age}</td></tr>',  
5.     '<tr><td>性别</td><td>{sex}</td></tr>',  
6.     '</table>'  
7. )  
8. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
9. tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});  

3、模板中使用格式化函数： 

Javascript代码  

1. //定义模板，并指定模板数据的格式化函数  
2. var tpl = new Ext.Template([  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td width=90>员工姓名</td>',  
5.     //{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写  
6.     '<td width=120>{userName:capitalize}</td></tr>',  
7.     '<tr><td width=90>工作日期</td>',  
8.     //{WorkDate:this.cusFormat()}使用自定义格式化函数  
9.     '<td width=120>{WorkDate:this.cusFormat()}</td></tr>',  
10.     '</table>'  
11. ]);  
12. //定义模板数据  
13. var tplData = {  
14.     userName : 'tom',  
15.     WorkDate : new Date(2002,7,1)  
16. }  
17. //模板的自定义格式化函数  
18. tpl.cusFormat = function(date,o){  
19.     return Ext.Date.format(date,'Y年m月d');  
20. }  
21. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
22. tpl.append('tpl-table',tplData);  

4、使用自定义格式化函数解析多层json对象 

Javascript代码  

1. //定义模板，并指定模板数据的格式化函数  
2. var tpl = new Ext.Template(  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td width=90 >姓名</td>',  
5.     '<td width=120>{name}</td></tr>',  
6.     '<tr><td width=90 >年龄</td>',  
7.     '<td width=120>{age}</td></tr>',  
8.     '<tr><td width=90 >身高</td>',  
9.     '<td width=120>{stature:this.parseJson}</td></tr>',  
10.     '</table>'  
11. );  
12. //定义模板数据  
13. var tplData = {  
14.     name : 'tom',  
15.     age : 24,  
16.     stature : {  
17.         num : 170,  
18.         unit : 'cm'  
19.     }  
20. }  
21. //通过自定义格式化函数解析json对象  
22. tpl.parseJson = function(json){  
23.     return json.num + json.unit;  
24. }  
25. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
26. tpl.append('tpl-table',tplData);  

5、使用tpl标签和for运算符 

Javascript代码  

1. //定义模板，使用tpl标签和for运算符  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',  
5.     '<tpl for=".">',  
6.     '<tr><td>{name}</td><td>{age}</td></tr>',  
7.     '</tpl>',  
8.     '</table>'  
9. );  
10. //定义模板数据  
11. var tplData = [  
12.     {name:'张三',age:20},  
13.     {name:'李四',age:25},  
14.     {name:'王五',age:27},  
15.     {name:'赵六',age:26}  
16. ]  
17. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
18. tpl.append('tpl-table',tplData);  

6、使用parent在子模板中访问父对象 

Javascript代码  

1. //定义模板，使用parent在子模板中访问父对象  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',  
5.     '<tpl for="emps">',  
6.     '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',  
7.     '</tpl>',  
8.     '</table>'  
9. );  
10. //定义模板数据  
11. var tplData = {  
12.     companyName : 'ACB公司',  
13.     emps:[  
14.         {name:'张三',age:20},  
15.         {name:'李四',age:25},  
16.         {name:'王五',age:27},  
17.         {name:'赵六',age:26}  
18.     ]  
19. }  
20. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
21. tpl.append('tpl-table',tplData);  

7、数组索引与简单数学运算 

Javascript代码  

1. //定义模板，数组索引与简单数学运算  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',  
5.     '<tpl for=".">',  
6.     '<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',  
7.     '</tpl>',  
8.     '</table>'  
9. );  
10. //定义模板数据  
11. var tplData = [  
12.         {name : '张三',wage : 1000},  
13.         {name : '李四',wage : 1200},  
14.         {name : '王五',wage : 900},  
15.         {name : '赵六',wage : 1500}  
16.     ]  
17. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
18. tpl.append('tpl-table',tplData);  

8、自动渲染简单数组 

Javascript代码  

1. //定义模板，自动渲染简单数组  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td>序号</td><td width=90 >姓名</td></tr>',  
5.     '<tpl for=".">',  
6.     '<tr><td>{#}</td><td>{.}</td></tr>',  
7.     '</tpl>',  
8.     '</table>'  
9. );  
10. //定义模板数据  
11. var tplData = ['张三','李四','王五','赵六']  
12. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
13. tpl.append('tpl-table',tplData);  

9、基本的条件逻辑判断 

Javascript代码  

1. //定义模板，基本的条件逻辑判断  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0>',  
4.     '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',  
5.     '<tpl for=".">',  
6.     '<tpl if="wage &gt; 1000">',  
7.     '<tr><td>{#}</td><td>{name}</td><td>{wage}</td></tr>',  
8.     '</tpl>',  
9.     '</tpl>',  
10.     '</table>'  
11. );  
12. //定义模板数据  
13. var tplData = [  
14.         {name : '张三',wage : 1000},  
15.         {name : '李四',wage : 1200},  
16.         {name : '王五',wage : 900},  
17.         {name : '赵六',wage : 1500}  
18.     ]  
19. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
20. tpl.append('tpl-table',tplData);  

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

Css代码  

1. <style type="text/css">  
2.     .even { background-color: #CCFFFF; }  
3.     .odd { background-color: #FFFFFF; }  
4.     .title {text-align: center;}  
5.   </style>  

Javascript代码  

1. //定义模板，在模板中执行任意代码  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0 class=title>',  
4.     '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</td></tr>',  
5.     '<tpl for="emps">',  
6.     '<tr class="{[xindex % 2 == 0 ? "even" : "odd"]}">',  
7.     '<td>{[xindex]}</td><td>{[values.name]}</td>',  
8.     '<td>{[values.wage * parent.per]}</td>',  
9.     '<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',  
10.     '</tpl>',  
11.     '<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',  
12.     '<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',  
13.     '</table>'  
14. );  
15. //模板的自定义格式化函数，用于计算工资总计  
16. tpl.avgWage = function (o) {  
17.     var sum = 0;  
18.     var length = o.emps.length;  
19.     for(var i = 0 ; i <length ; i++){  
20.         sum += o.emps[i].wage;  
21.     }  
22.     return sum * o.per;  
23. }  
24. //定义模板数据，per表示发薪比例，wage表示标准工资  
25. var tplData = {  
26.     per : 0.9,  
27.     emps : [  
28.         {name : '张三',wage : 1000},  
29.         {name : '李四',wage : 1200},  
30.         {name : '王五',wage : 900},  
31.         {name : '赵六',wage : 1500}  
32.     ]  
33. }  
34. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
35. tpl.append('tpl-table',tplData);  

11、使用模板成员函数 

Javascript代码  

1. //定义模板，在模板中使用模板成员函数  
2. var tpl = new Ext.XTemplate(  
3.     '<table border=1 cellpadding=0 cellspacing = 0 class=title>',  
4.     '<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',  
5.     '<tpl for=".">',  
6.     '<tpl if="this.check(wage)">',  
7.     '<tr><td>{name}</td>',  
8.     '<td>{[this.format(values.wage)]}</td>',  
9.     '</tpl></tpl>',  
10.     '</table>',  
11.     {  
12.         //定义模板成员函数  
13.         check : function(wage) {  
14.             if(wage > 1000){  
15.                 return true;  
16.             }else {  
17.                 return false  
18.             }  
19.         },  
20.         //定义模板成员函数  
21.         format : function(wage) {  
22.             if(wage > 1300){  
23.                 return '<font color=red>'+wage+'</font>';  
24.             }else {  
25.                 return '<font color=blue>'+wage+'</font>';  
26.             }  
27.               
28.         }  
29.     }  
30. );  
31. //定义模板数据，per表示发薪比例，wage表示标准工资  
32. var tplData = [  
33.         {name : '张三',wage : 1000},  
34.         {name : '李四',wage : 1200},  
35.         {name : '王五',wage : 900},  
36.         {name : '赵六',wage : 1500}  
37.     ]  
38. //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
39. tpl.append('tpl-table',tplData);  

12、在Extjs组件中使用模板 

Css代码  

1. <style type="text/css">  
2.     .even { background-color: #CCFFFF; }  
3.     .odd { background-color: #FFFFFF; }  
4. </style>  

Javascript代码  

1. //定义组合框模板  
2. var itemTpl = new Ext.XTemplate(  
3.     '<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',  
4.     '{#} ：{[this.check(values)]}</div>',  
5.     {  
6.         check : function (values) {  
7.             if(values.value > 2 ){  
8.                 return "<font color=red>"+values.item+"</font>";  
9.             }else {  
10.                 return "<font color=blue>"+values.item+"</font>";  
11.             }  
12.         }  
13.     }  
14. );  
15. //创建数据模型  
16. Ext.regModel('ItemInfo', {  
17.     fields: ['item','value']  
18. });  
19.   
20. new Ext.form.Panel({  
21.     title:'在Extjs组件中使用模板',  
22.     renderTo: Ext.getBody(),  
23.     bodyPadding: 5,  
24.     height : 100,  
25.     frame : true,  
26.     width : 350,  
27.     items : [{  
28.         xtype : 'combo',  
29.         fieldLabel:'邮政编码',  
30.         displayField:'item',  
31.         valueField:'value',  
32.         labelSeparator :'：',//分隔符  
33.         listConfig : {  
34.             itemTpl : itemTpl  
35.         },  
36.         editable : false,  
37.         queryMode: 'local',  
38.         triggerAction: 'all',  
39.         store : new Ext.data.Store({  
40.             model : 'ItemInfo',  
41.             fields: ['item','value'],  
42.             data : [{item:'条目1',value:1},  
43.                     {item:'条目2',value:2},  
44.                     {item:'条目3',value:3},  
45.                     {item:'条目4',value:4},  
46.                     {item:'条目5',value:5},  
47.                     {item:'条目6',value:6}]  
48.         })  
49.     }]  
50. });  

13、Ext.view.View示例 

Javascript代码  

1. var inputForm = Ext.create('Ext.form.Panel',{  
2. bodyPadding: 5,  
3. width : 490,  
4. flex : 2,  
5. fieldDefaults:{//统一设置表单字段默认属性  
6.     labelSeparator :'：',//分隔符  
7.     labelWidth : 60,//标签宽度  
8.     width : 150,//字段宽度  
9.     msgTarget : 'side',  
10.     allowBlank : false,  
11.     labelAlign : 'right'  
12. },  
13. layout: {//设置容器字段布局  
14.     type: 'hbox',  
15.     align: 'middle'//垂直居中  
16. },  
17. defaultType: 'textfield',//设置表单字段的默认类型  
18. items:[{  
19.     fieldLabel:'产品名称',  
20.     name : 'productName'  
21. },{  
22.     fieldLabel:'数量',  
23.     xtype : 'numberfield',  
24.     name : 'productNum'  
25. },{  
26.     fieldLabel:'金额',  
27.     xtype : 'numberfield',  
28.     name : 'productPrice'  
29. }],  
30. fbar : [{  
31.     text : '添加',  
32.     handler : function(){  
33.         if(inputForm.getForm().isValid()){  
34.             var data = inputForm.getForm().getValues();  
35.             var product = Ext.ModelMgr.create(data, 'ProductInfo');  
36.                 productStore.add(product);  
37.                 inputForm.getForm().reset();  
38.             }  
39.         }  
40.     }]  
41. });  
42. //创建数据模型  
43. Ext.regModel('ProductInfo', {  
44. fields: ['productName','productNum','productPrice']  
45. });  
46. //创建产品数据源  
47. var productStore = Ext.create('Ext.data.Store',{  
48. autoLoad : true,  
49. data : [],  
50. model : 'ProductInfo',  
51. proxy: {  
52.     type: 'memory',  
53.     reader: {  
54.         type: 'json',  
55.         root: 'datas'  
56.         }  
57.     }  
58. });  
59. //定义模板  
60. var productTpl = new Ext.XTemplate(  
61.     '<table border=1 cellspacing=0 cellpadding=0 width=100%>',  
62. '<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>',  
63. '<tpl for=".">',  
64. '<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>',  
65. '</tpl>',  
66. '</table>'  
67. );  
68. //产品数据视图  
69. var productView = Ext.create('Ext.view.View',{  
70. store: productStore,  
71. tpl: productTpl,  
72. deferEmptyText : false,  
73. itemSelector:'div.thumb-wrap',  
74. emptyText: '请录入商品'  
75. });  
76. //产品面板  
77. var productViewPanel = Ext.create('Ext.panel.Panel',{  
78. autoScroll:true,  
79. width : 490,  
80. flex : 3,  
81. layout : 'fit',  
82. bodyStyle:'background-color:#FFFFFF',  
83.     items: productView  
84. });  
85. Ext.create('Ext.panel.Panel',{  
86. renderTo: document.body,  
87. frame:true,  
88. width : 500,  
89. height: 200,  
90. layout:'vbox',  
91. title:'产品录入',  
92.     items: [inputForm, productViewPanel]  
93. });