Extjs4 XTemplate 用法

来源：互联网发布：VB中改变窗体颜色属性编辑：程序博客网时间：2024/04/28 11:47

Ext.XTemplate 用法

1 自动填充数组和作用域切换：

Ext.onReady(function(){  var tpl=new Ext.XTemplate(     '<table border=1>',  '<tr><td>姓名</td><td>年龄</td><td>操作</td></tr>',  '<tpl for=".">',  '<tr><td>{name}</td><td>{age}</td><td></td></tr>',  '</tpl>',  '</table>'  ) ;  var tplData=[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ];  var panel=Ext.create('Ext.panel.Panel',{  title:'XTmplate',  width:1200,  height:300,  tpl:tpl,  renderTo:Ext.getBody()  });  tpl.append('tmp',tplData); });

代码中使用tpl 标签和for 运算符，本例中for运算符的值为“.”，表示指向当前对象，“..” 表示指向父对象，也可以直接写对象名，另外对数组的支持可以成批向模板中追加数据，

2 在子模板中访问父对象

  Ext.onReady(function(){  var tpl=new Ext.XTemplate(     '<table border=1>',  '<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',  '<tpl for="emps">',  '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',  '</tpl>',  '</table>'  ) ;   var company={  companyName:'IBM',  emps:[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ]  }; tpl.append('tmp',company);   /*  var tplData=[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ];  tpl.append('tmp',tplData);  */ });

子对象中访问父对象的属性要使用“parent.”。

3 自动渲染简单数组：

Ext.onReady(function(){  var tpl=new Ext.XTemplate(     '<table border=1>',  '<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',  '<tpl for=".">',  '<tr><td>{#}</td><td>{.}</td><td>{.}</td></tr>',  '</tpl>',  '</table>'  ) ;  var array=['a','b','c','d','e']; tpl.append('tmp',array);   /*   var company={  companyName:'IBM',  emps:[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ]  };  var tplData=[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ];  tpl.append('tmp',tplData);  */ });

{#} 代表行号，{.} 代表数组内容

4：使用基本逻辑判断

Ext.onReady(function(){  var tpl=new Ext.XTemplate(     '<table border=1>',  '<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',  '<tpl for="emps">',  '<tpl if="age &gt; 20">',  '<tr><td>{#}</td><td>{name}</td><td>{age}</td></tr>',  '</tpl>',  '</tpl>',  '</table>'  ) ;   var company={  companyName:'IBM',  emps:[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ]  }; tpl.append('tmp',company);   /*  var array=['a','b','c','d','e'];    var tplData=[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ];  tpl.append('tmp',tplData);  */ });

（> 表示> , < 表示<）

5: 在模板中执行任意代码

Ext.onReady(function(){  var tpl=new Ext.XTemplate(     '<table border=1 class=title>',  '<tr><td>序号</td><td>姓名</td><td>工资</td><td>奖金</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>  </td></tr>',  '</table>'  ) ;     var tplData={ per:0.9, emps:[ {name:'a',wage:1000}, {name:'b',wage:200}, {name:'c',wage:100}, {name:'d',wage:10}, {name:'e',wage:897}, {name:'f',wage:110} ] }; tpl.append('tmp',tplData);   /*  var array=['a','b','c','d','e'];    var tplData=[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ];  tpl.append('tmp',tplData);  */ });

values : 当前作用域下的值对象，通过切换子模板的作用域可以改变其中的值

parent：父模板的值对象

xindex：循环模板的索引

xcount：循环模板时候的总循环次数

6 在Extjs 组件中使用模板：

Ext.onReady(function(){  var tpl=new Ext.XTemplate(   '<div class="x-combo-list{[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'] }) var panel=Ext.create('Ext.panel.Panel',{ title:'数组使用模板', renderTo:Ext.getBody(), height:500, width:1200, items:[ { xtype:'combo', fieldLabel:'邮编', displayField:'item', valueField:'value', labelSeparator:':', listConfig:{ itemTpl:tpl }, editable:false, queryMode:'local', store:new Ext.data.Store({ model:'ItemInfo', fields:['item','value'], data:[ {item:'a',value:1}, {item:'b',value:2}, {item:'c',value:3}, {item:'d',value:4}, {item:'e',value:5}, {item:'f',value:6}, ] }) } ] }); tpl.append('tmp',tplData);   /*  var array=['a','b','c','d','e'];    var tplData=[  {name:'a',age:10},  {name:'b',age:20},  {name:'c',age:30},  {name:'d',age:40},  {name:'e',age:50},  ];  tpl.append('tmp',tplData);  */ });

许多组件中都可以使用模板，他们一般表现为tpl配置项，通过为该配置提供相应的模板就可以改变组件默认的表现方式，可以进行一些个性化的定制。

0 0