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

最新推荐文章于 2021-06-17 11:49:15 发布

yyhm

最新推荐文章于 2021-06-17 11:49:15 发布

阅读量7.6k

点赞数 2

分类专栏： EXT4 文章标签： extjs javascript function autoload json 产品

EXT4 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、append方法

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

2、overwrite方法：

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

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

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

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

    Javascript代码   
    
  
 //定义模板，并指定模板数据的格式化函数  
 var tpl = new Ext.Template(  
     '<table border=1 cellpadding=0 cellspacing = 0>',  
     '<tr><td width=90 >姓名</td>',  
     '<td width=120>{name}</td></tr>',  
     '<tr><td width=90 >年龄</td>',  
     '<td width=120>{age}</td></tr>',  
     '<tr><td width=90 >身高</td>',  
     '<td width=120>{stature:this.parseJson}</td></tr>',  
     '</table>'  
 );  
 //定义模板数据  
 var tplData = {  
     name : 'tom',  
     age : 24,  
     stature : {  
         num : 170,  
         unit : 'cm'  
     }  
 }  
 //通过自定义格式化函数解析json对象  
 tpl.parseJson = function(json){  
     return json.num + json.unit;  
 }  
 //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
 tpl.append('tpl-table',tplData);  

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

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

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

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

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

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

8、自动渲染简单数组

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

9、基本的条件逻辑判断

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

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

    Css代码   
    
  
 <style type="text/css">  
     .even { background-color: #CCFFFF; }  
     .odd { background-color: #FFFFFF; }  
     .title {text-align: center;}  
   </style>  

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

11、使用模板成员函数

    Javascript代码   
    
  
 //定义模板，在模板中使用模板成员函数  
 var tpl = new Ext.XTemplate(  
     '<table border=1 cellpadding=0 cellspacing = 0 class=title>',  
     '<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',  
     '<tpl for=".">',  
     '<tpl if="this.check(wage)">',  
     '<tr><td>{name}</td>',  
     '<td>{[this.format(values.wage)]}</td>',  
     '</tpl></tpl>',  
     '</table>',  
     {  
         //定义模板成员函数  
         check : function(wage) {  
             if(wage > 1000){  
                 return true;  
             }else {  
                 return false  
             }  
         },  
         //定义模板成员函数  
         format : function(wage) {  
             if(wage > 1300){  
                 return '<font color=red>'+wage+'</font>';  
             }else {  
                 return '<font color=blue>'+wage+'</font>';  
             }  
               
         }  
     }  
 );  
 //定义模板数据，per表示发薪比例，wage表示标准工资  
 var tplData = [  
         {name : '张三',wage : 1000},  
         {name : '李四',wage : 1200},  
         {name : '王五',wage : 900},  
         {name : '赵六',wage : 1500}  
     ]  
 //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中  
 tpl.append('tpl-table',tplData);  

12、在Extjs组件中使用模板

    Css代码   
    
  
 <style type="text/css">  
     .even { background-color: #CCFFFF; }  
     .odd { background-color: #FFFFFF; }  
 </style>  

    Javascript代码   
    
  
 //定义组合框模板  
 var itemTpl = new Ext.XTemplate(  
     '<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',  
     '{#} ：{[this.check(values)]}</div>',  
     {  
         check : function (values) {  
             if(values.value > 2 ){  
                 return "<font color=red>"+values.item+"</font>";  
             }else {  
                 return "<font color=blue>"+values.item+"</font>";  
             }  
         }  
     }  
 );  
 //创建数据模型  
 Ext.regModel('ItemInfo', {  
     fields: ['item','value']  
 });  
   
 new Ext.form.Panel({  
     title:'在Extjs组件中使用模板',  
     renderTo: Ext.getBody(),  
     bodyPadding: 5,  
     height : 100,  
     frame : true,  
     width : 350,  
     items : [{  
         xtype : 'combo',  
         fieldLabel:'邮政编码',  
         displayField:'item',  
         valueField:'value',  
         labelSeparator :'：',//分隔符  
         listConfig : {  
             itemTpl : itemTpl  
         },  
         editable : false,  
         queryMode: 'local',  
         triggerAction: 'all',  
         store : new Ext.data.Store({  
             model : 'ItemInfo',  
             fields: ['item','value'],  
             data : [{item:'条目1',value:1},  
                     {item:'条目2',value:2},  
                     {item:'条目3',value:3},  
                     {item:'条目4',value:4},  
                     {item:'条目5',value:5},  
                     {item:'条目6',value:6}]  
         })  
     }]  
 });  

13、Ext.view.View示例

    Javascript代码   
    
  
 var inputForm = Ext.create('Ext.form.Panel',{  
 bodyPadding: 5,  
 width : 490,  
 flex : 2,  
 fieldDefaults:{//统一设置表单字段默认属性  
     labelSeparator :'：',//分隔符  
     labelWidth : 60,//标签宽度  
     width : 150,//字段宽度  
     msgTarget : 'side',  
     allowBlank : false,  
     labelAlign : 'right'  
 },  
 layout: {//设置容器字段布局  
     type: 'hbox',  
     align: 'middle'//垂直居中  
 },  
 defaultType: 'textfield',//设置表单字段的默认类型  
 items:[{  
     fieldLabel:'产品名称',  
     name : 'productName'  
 },{  
     fieldLabel:'数量',  
     xtype : 'numberfield',  
     name : 'productNum'  
 },{  
     fieldLabel:'金额',  
     xtype : 'numberfield',  
     name : 'productPrice'  
 }],  
 fbar : [{  
     text : '添加',  
     handler : function(){  
         if(inputForm.getForm().isValid()){  
             var data = inputForm.getForm().getValues();  
             var product = Ext.ModelMgr.create(data, 'ProductInfo');  
                 productStore.add(product);  
                 inputForm.getForm().reset();  
             }  
         }  
     }]  
 });  
 //创建数据模型  
 Ext.regModel('ProductInfo', {  
 fields: ['productName','productNum','productPrice']  
 });  
 //创建产品数据源  
 var productStore = Ext.create('Ext.data.Store',{  
 autoLoad : true,  
 data : [],  
 model : 'ProductInfo',  
 proxy: {  
     type: 'memory',  
     reader: {  
         type: 'json',  
         root: 'datas'  
         }  
     }  
 });  
 //定义模板  
 var productTpl = new Ext.XTemplate(  
     '<table border=1 cellspacing=0 cellpadding=0 width=100%>',  
 '<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>',  
 '<tpl for=".">',  
 '<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>',  
 '</tpl>',  
 '</table>'  
 );  
 //产品数据视图  
 var productView = Ext.create('Ext.view.View',{  
 store: productStore,  
 tpl: productTpl,  
 deferEmptyText : false,  
 itemSelector:'div.thumb-wrap',  
 emptyText: '请录入商品'  
 });  
 //产品面板  
 var productViewPanel = Ext.create('Ext.panel.Panel',{  
 autoScroll:true,  
 width : 490,  
 flex : 3,  
 layout : 'fit',  
 bodyStyle:'background-color:#FFFFFF',  
     items: productView  
 });  
 Ext.create('Ext.panel.Panel',{  
 renderTo: document.body,  
 frame:true,  
 width : 500,  
 height: 200,  
 layout:'vbox',  
 title:'产品录入',  
     items: [inputForm, productViewPanel]  
 });  