Reproduced EXTJS4 notes (4) ext.xtemplate template

Li Hope (lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan/)
Copyright notice: The copyright of this article is owned by the author and the blog Park. Reprint must indicate the detailed link of this article, otherwise the author will retain to pursue its legal responsibility.

This article will cover an important concept in ExtJS, template. Say Razor is very magical, but I personally do not like that HTML mixed C # way, as if back to the era of ASP. ExtJS templates can also be organized to generate flexible HTML, and the code and HTML are effectively separated. This article will carefully analyze the usage of ExtJS templates.

Before writing, I first put the public HTML and the JS data used in front, the following code to refer to.

[HTML]

    
Define the data source:
[Js]
    var data = {        name: ' Zhang San ',        job: ' C # Programmer ', company        : ' HP ',        email: ' [email protected] ',        address: ' Wuhan Hongshan District Optics Valley Software Park ', City        : ' Wuhan ', State        : ' normal ',        zip: ' 430000 ',        drinks: [' green tea ', ' red wine ', ' coffee '],        friends: [{            Name: ' John Doe ',            age:6, like            : ' Flowers '        }, {            name: ' Harry ',            age:26, like            : ' Football '        }, {            name: ' Zhao Liu ',            age:81, like            : ' Game '        }]    };
First, use the label TPL and operator for
Now I'm going to show the data source on the page and organize it into a table. But this HTML is not written dead, but is generated through templates. With the label TPL and operator for, you can loop out Zhang San friends:
[Js]
//Use the label TPL and operator for var TPL = new Ext.xtemplate (' <table Cellpa dding=0 cellspacing=0 border=1 width=400px> ', ' <tr><td colspan=2 Align=center><b>{name} 's profile          </b></td></tr> ', ' <tr><td> name:</td><td>{name}</td></tr> ', ' <tr><td> work:</td><td>{job}</td></tr> ', ' <tr><td> company: </td ><td>{company}</td></tr> ', ' <tr><td> address: </td><td>{address}</td& Gt;</tr> ', ' <tr><td> preferences drinks:</td><td>{drinks}</td></tr> ', ' <tr ><td> his friend:</td><td> ', ' <tpl for= ' friends ' > ', ' <p>{name}:{age} year old </p>    ; ', ' </tpl></td></tr> ', ' </table> '); Tpl.overwrite (Ext.get ("Div1"), data); 
To view the output effect:
Second, access the parent element object within the scope of the child template
When we traverse the output Zhang San friend, need to revisit the Zhang San information, how to do it, see the following JS:
[Js]
    Accessing the parent element object within the scope of the child template    var tp2 = new Ext.xtemplate (     ' <tpl for= "Friends" > ',     ' <p>{name} ' is { Parent.name} 's friends. </p> ',      ' </tpl> '    );    Tp2.overwrite (Ext.get ("Div2"), data);
To view the output effect:
Third, array element index and simple operation support
When iterating through an array, the index information can be obtained through {#}, and the underlying data can also support simple operations:
[Js]
    Array element Index and simple operation support    var TP3 = new Ext.xtemplate (     ' <tpl for= "Friends" > ',         ' <p>{#}, one year later, {name} The age is:{age+1}</p> ',      ' </tpl> '    );    Tp3.overwrite (Ext.get ("Div3"), data);
To view the output effect:
Iv. automatic rendering of single-root arrays
through {.} You can automatically render single-root arrays without key-value pairs, as shown in the following example:
[Js]
    Auto Render single-root array    var TP4 = new Ext.xtemplate (     ' drinks: <tpl for= ' drinks ' > ',     ' {.} ',      ' </tpl> '    );    Tp4.overwrite (Ext.get ("Div4"), data);
To view the output effect:
V. Conditional logic Judgment
With the use of the label TPL and the IF operator, you can make some simple logic judgments, note that there is no else operator, you can write two if instead. In addition, less than the symbol to be HTML-encoded, not directly written.
[Js]
    Conditional logic judgment    var tp5 = new Ext.xtemplate (     ' <table cellpadding=0 cellspacing=0 border=1 width=400px> ',     ' <tr><td> his friend:</td><td> ',     ' <tpl for= ' friends ' > ',         ' <tpl if= ' age < 18 ' ><p>{name}:[minor]</p></tpl> ',         ' <tpl if= ' age >= ' ><p>{name}:{age} year old </p ></tpl> ',     ' </tpl></td></tr> ',     ' </table> '    );    Tp5.overwrite ("DIV5", data);
To view the output effect:
Vi. Instant execution of arbitrary code
In Xtemplate, {[...]} The content within the scope is executed at the scope of the template scope. Here are some special variables:
Values: The value under the current scope. To change the value, you can toggle the scope of the child template.
Parent: The object of the child template
Xindex: If the loop is a template, this is the index of the current loop (starting at 1).
Xcount: If the loop template, this is the number of cycles.
[Js]
    Instant execution of arbitrary code    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]}> his friend:</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);
To view the output effect:
Vii. Template member functions
Custom functions can also be called in templates, which are passed through the configuration. The relevant wording 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 woman. </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 = = ' flowers ';         },         Ismen:function {return like!             = "Flowers";         },         ischild:function (age) {             return <;         }     }    );    Tp7.overwrite (Ext.get ("Div7"), data);
To view the output effect: