`
endual
  • 浏览: 3557922 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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. });  
分享到:
评论

相关推荐

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记...

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    extjs2----关于extjs 的使用,操作

    在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容较为初级,适合初学者学习,这表明我们将探讨的是ExtJS的基础概念和...

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs6.2 生成的admin-dashboard官方模板

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    extjs4 学习笔记源码

    exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net

    ExtJS4学习笔记十一 树控件的使用

    在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...

    Extjs 6.2 最新sdk ext-6.2.0-gpl.zip

    官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...

    extjs oracle分页---Json转换

    标题“ExtJS Oracle分页---Json转换”涉及的是在Web应用程序开发中,使用ExtJS框架与Oracle数据库进行分页数据交互,并通过Json格式进行数据转换的技术。以下是对这个主题的详细解释: ExtJS是一个强大的JavaScript...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    Extjs4.0学习笔记大全.pdf

    Extjs4.0学习笔记大全.pdf,供大家学习

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

Global site tag (gtag.js) - Google Analytics