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. });  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值