Ext.XTemplate2

来源:互联网 发布:mac一直显示flash过期 编辑:程序博客网 时间:2024/06/06 14:01
var tpl=new Ext.XTemplate(
        '<table><tr><th>名称:{name}</th></tr>',
        '<tr><td>',
        '<tpl for="read">',
             '<p>编号:{#},书:{book},日期:{date}</p>',
        '</tpl></td></tr></table>'
    );
tpl.compile();
    tpl.overwrite(mypanel.body,data);
*/
1.tpl.compile();//可以在创建模板后,添加tpl.compile();编译代码,速度快点.
2. tpl.overwrite(mypanel.body,data);//把数据填充到模板中去,并呈现到目标组件
3.名称:{name}//对于一维单数据对象,直接用{名称}输出,
4.,<tpl for="read">//对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点
5.{.}//对于一维对数据的对象,如color: ['Red', 'Blue', 'Black'],可以用{.}按照tpl模板逐一输出,如: 
   '<tpl for="color">',
       
'<div> {.}</div>',
    
'</tpl>'
6.{#}//表示循环的索引
7.parent.***//在子对象中访问父对象元素,使用parent,如:{parent.name}
8.if//'<tpl if="age &gt; 1">', 
            '<p>{name}</p>',
        
'</tpl>',
    
//if实现有条件的逻辑判断,很容易使用
9.其他几个常用的参数:
     xindex
//循环模板的当前索引index(从1开始),用[]。 
     xcount//循环模板循环的次数。 用[]
  举例:
   
'<tpl for="read">',
             
'<p>编号:{#},书:{book},日期:{date},奇偶:{[xindex%2==0?"偶数":"奇数"]},次数:{[xcount]}</p>',
        
'</tpl>
10.模板成员函数(借用api下):
var tpl = new Ext.XTemplate(
    
'<tpl for="kids">',
        
'<tpl if="this.isGirl(name)">',
            
'<p>Girl: {name} - {age}</p>',
        '</tpl>',
        
'<tpl if="this.isGirl(name) == false">',
            
'<p>Boy: {name} - {age}</p>',
        
'</tpl>',
    
'</tpl></p>', {
     isGirl: 
function(name){
         
return name == 'Sara Grace';
     },
     isBaby: 
function(age){
        
return age < 1;
     }
});
0 0