XTemplate模板

//1.最简单的XTemplate模板示

//2.在模板中使用本地数据

//3.读取对象属性值中的数组

//4.在读取tpl标签与for标签的时候,可以直接使用{.}变量读取数组的内容

 

________________________________________________________________________________________

 

单击"替换模板",则替换模板的文字

 

 

------------------------------------------------------1.最简单的XTemplate模板示------------------------------------------------------------------------------------------

var data={
   string_value:'模板的初始文字'   
  };
  
  var tpl=new Ext.XTemplate(
   '<table>',
   '<tr>',
   '<td>{string_value}</td>',
   '</tr>',
   '</table>'
  );
  var tplHtml=tpl.apply(data);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量
  var toolbar=Ext.create('Ext.Toolbar',{
   docked:'top',
   items:[
    {
     text:'替换模板',
     handler:function(){
      var newData={
       string_value:'替换后的模板'
      }
      tpl.overwrite(Ext.get('subPanel'),newData)//将数据添加到应用模板,然后tpl重新加载新数据
      
     }
    }   
   ]
         
  });
  
  var myPanel=Ext.create('Ext.Panel',{
   items:[
    toolbar,
    {
     id:'subPanel',
     xtype:'panel',
     html:tplHtml
    }
   ]       
  });
  
  
  Ext.Viewport.add(myPanel);

 

_____________________________________________________________________________________

 

 

//-------------------------2.在模板中使用本地数据--------------------------------

 

 

  //知识点:将数据中的全部数据循环读入模板<tpl for="."></tpl>
  var data=[
   {
    name:'罗晓丽',
    age:23
   },
   {
    name:'王晶晶',
    age:18
    
   },
   {
    name:'沈婷',
    age:20
   },
   {
    name:'京京网',
    age:50
   }
  ];
  
  var tpl=new Ext.XTemplate(
   '<div>个人信息:</div>',
   '<tpl  for=".">',
    '<div>{#}. 姓名:{name},年龄:{age}</div>',
   '</tpl>'
  );
  var tplHtml=tpl.apply(data);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量

  var myPanel=Ext.create('Ext.Panel',{
   html:tplHtml      
  });
  
  Ext.Viewport.add(myPanel);
  ________________________________________________________________________________

 

//-------------------------3.读取对象属性值中的数组--------------------------------
  

  //知识点:使用tpl与for不仅可以直接读取数据,而且可以读取一个对象的某个属性值中的数组.
  //方法如下:<tpl for="AttributeName"></tpl>
  
  //例如:要在模板中读入某个公司的信息
  var company={
   name:'常州第一百货公司',
   address:'清扬北路238号',
   email:'[e-mail]',
   city:'常州市',
   province:'江苏省',
   zip:'213001',
   employer:[
    {
     name:'张三',
     age:37
    },{
     name:'李四',
     age:27
    },{
     name:'王五',
     age:44
    }
   ]
   
  }
  
  var tpl=new Ext.XTemplate(
   '<p>公司:<br /></p>',
   '<tpl for=".">',
    '公司名称:{name}<br />',
    '地址:{province}{city}{address}<br />',
    '电子邮件:{email}<br />',
    '邮政编码:{zip}<br />',
    '<tpl for="employer">',
     '姓名:{name},年龄:{age}<br />',
    '</tpl>',
   '</tpl>'
  );
  var tplHtml=tpl.apply(company);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量

  var myPanel=Ext.create('Ext.Panel',{
   html:tplHtml      
  });
  
  Ext.Viewport.add(myPanel);

___________________________________________________________________________

 

//-------------------------4.在读取tpl标签与for标签的时候,可以直接使用{.}变量读取数组的内容-----------------------
  

 

 

  
  //例如:要在模板中读入某个公司的信息
  var data=[
   '张三','李四','王五'   
  ]
  
  var tpl=new Ext.XTemplate(
   '<tpl for=".">',
    '姓名:{.}<br/>',
   '</tpl>'
  );
  var tplHtml=tpl.apply(data);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量

  var myPanel=Ext.create('Ext.Panel',{
   html:tplHtml      
  });
  
  Ext.Viewport.add(myPanel);

 

_______________________________________________________________________________

//-------------------------5.访问父类对象-----------------------
  

 

 

  //使用标签tpl与for遍历某个对象的成员对象数组时,可以使用parent对象访问成员对象的父对象的其他属性,这是parent对象就代表了成员对象的父对象
  
  var company={
   name:'常州第一百货公司',
   employer:[
    {
     name:'张三',
     age:37
    },{
     name:'李四',
     age:27
    },{
     name:'王五',
     age:44
    }
   ]
   
  }
  
  var tpl=new Ext.XTemplate(
   '<p>公司:<br /></p>',
    '<tpl for="employer">',
     '姓名:{name},年龄:{age},工作单位:{parent.name}<br />',
    '</tpl>'
  );
  var tplHtml=tpl.apply(company);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量

  var myPanel=Ext.create('Ext.Panel',{
   html:tplHtml      
  });
  
  Ext.Viewport.add(myPanel);

___________________________________________________________________________