Extjs4 note (4) Ext. xtemplate Template

Back to the series directory

This article involves an important concept and template in extjs. Razor is amazing, but I personally don't like the HTML-mixed C # method, as if I have returned to the ASP era. Extjs templates can also generate flexible HTML, andCodeEffective separation from HTML. This article will analyze the usage of extjs templates in detail.

Before writing the text, I first paste the public HTML and JS data used in front, and the subsequent code will be referenced.

[HTML]

 
<H1> Use tag TPL and operator for  
 

 
Define the data Data source:
 

 
[JS]
 

 
VaR DATA = {Name: 'zhangsan', job: 'C #ProgramEmployee ', company: 'hp', email: 'zhangsan @ 163.com ', address: 'wuhan Hongshan guanggu Software Park', city: 'wuhan ', state: 'normal', ZIP: '123456', drinks: ['green my', 'red', 'coffee '], friends: [{Name: 'lily', age: 6, like: 'Flowers '}, {Name: 'wang 5', age: 26, like: 'soccer'}, {Name: 'zhao liu', age: 81, like: 'game'}]};
 
 
I. Use tags TPL and operators
 

 
Now I want to display the data source to the page and organize it into the table. However, this HTML is not written to death, but generated through the template. With the tag TPL and operator for, you can output three friends cyclically:
 

 
[JS]
 

 // use the label TPL and the operator for var tpl = new Ext. xtemplate ('
  
   
    
    ', '
   
     ', ' 
     ', ' 
      ',' 
      ',' 
      ',' 
      ',' 
     ', ' 
    
 
     
 
      
  {name}'s personal data  
 
     
 
      
 name: 
 
      
 {name} 
 
     
 
      
 Work: 
 
      
{job} 
 
     
 
      
 company: 
 
      
{company }
 
     
 
      
 address: 
 
      
{ address} 
 
     
 
      
 preference drinks: 
 
      
 {drinks} 
 
     
 
      
 his friends: 
 
      
 ', '  ', ' 
 {name }:{ age} years old 
 ', '  
 
     
  
   
'); TPL. overwrite (ext. get ("div1"), data); 
 

 
View output results:
 

 
 
2. Access the parent element object within the scope of the sub-template
 
When we traverse and output a friend of Michael Jacob, we need to access Michael Jacob's information again. How can we do this? See the following JavaScript code:
 

 
[JS]
 

 
// Access the parent Element Object var TP2 = new ext within the scope of the sub-template. xtemplate ('<TPL for = "friends">', '<p> {name} is {parent. name} friends. </P> ',' </TPL> '); tp2.overwrite (ext. Get ("div2"), data );
 
 
 

 
View output results:
 

 
 
3. array element index and simple operation support
 
When cyclically accessing an array, you can use {#} to obtain the index information. Basic data also supports simple operations:
 

 
[JS]
 

 
// Array element indexes and simple operations support var TP3 = new Ext. xtemplate ('<TPL for = "friends">', '<p >{#}. After one year, the age of {name} is: {age + 1} </P> ',' </TPL> '); tp3.overwrite (ext. get ("div3"), data );
 
 
 

 
View output results:
 

 
 
4. automatically render a single array
 
You can use {.} to automatically render a single array without a key-value pair, for example:
 

 
[JS]
 

 
// Automatically render a single array var tp4 = new Ext. xtemplate ('preference drinks: <TPL for = "drinks"> ','{.} ',' </TPL> '); tp4.overwrite (ext. get ("div4"), data );
 
 
 

 
View output results:
 

 
 
5. Conditional logical judgment
 
With the use of tag TPL and operator if, you can make some simple logic judgments. Note that you can write two if statements instead of else operators. In addition, less than the symbol must be HTML encoded and cannot be written directly.
 

 
[JS]
 

// Conditional logical judgment var TP5 = new Ext. xtemplate ('<Table cellpadding = 0 cellspacing = 0 border = 1 width = 400px>', '<tr> <TD> his friends: </TD> <TD> ', '<TPL for = "friends">', '<TPL if = "age <18"> <p> {name }: [minor] </P> </TPL> ',' <TPL if = "age> = 18"> <p> {name }: {age} years old </P> </TPL> ',' </TPL> </TD> </tr> ',' </table> '); tp5.overwrite ("div5", data );
 
 
 

 
View output results:
 

 
 
6. Execute Arbitrary Code instantly
 
In xtemplate, content in the range of {[...]} is executed within the scope of the template. Here are some special variables:
Values: the value in the current scope. To change the value, you can switch the scope of the subtemplate.
Parent: parent template object
Xindex: if it is a loop template, This is the index of the current loop (starting from 1 ).
Xcount: the number of cycles for a loop template.
 

 
[JS]
 

// Execute arbitrary code in real time var TP6 = new Ext. xtemplate ('current Date: {[new date (). tolocaledatestring ()]} ',' <Table cellpadding = 0 cellspacing = 0 border = 1 width = 400px> ',' <TPL for = "friends"> <tr> ', '<TPL if = "xindex = 1"> <TD rowspan = {[xcount]}> friends: </TD> </TPL> ', '<TD> {["name:" + values. name + ", age:" + values. age + "," + (values. like = "Flowers "? "Is a girl": "is a boy")]} </TD> ',' </tr> </TPL> ',' </table> '); tp6.overwrite ("div6", data );
 
 
 

 
View output results:
 

 
 
VII. template member functions
 
You can also call custom functions in the template. These functions are passed in through configuration. The statement is as follows:
 

 
[JS]
 

// Template member function var TP7 = new Ext. xtemplate ('<B> his friends: </B> <TPL for = "friends"> <p>', '<TPL if = "this. iswoman (like) "> {name}: a female. </TPL> ',' <TPL if = "This. ismen (like)"> {name}: A man. </TPL> ',' <TPL if = "This. ischild (AGE)"> {name}: a child. </TPL> ',' </P> </TPL> ', {iswoman: function (like) {return like = 'flower';}, ismen: function (like) {return like! = "Flowers" ;}, ischild: function (AGE) {return age <18 ;}}); tp7.overwrite (ext. Get ("div7"), data );
 
 
 

 
View output results:
 

 
 

 
By Lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan)
Copyright: The copyright of this article is shared by the author and the blog. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.