Extjs4 note (4) Ext. xtemplate Template

Source: Internet
Author: User
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.


<H1> Use tag TPL and operator for  

Define the data Data source:


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:


 // 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:


// 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:


// 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:


// 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.


// 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.


// 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:


// 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.