Ext.js Getting Started: Templates (iii)

1.ext.domhelper Introduction
Introduction to 2.Template Syntax usage
3.Template Simple Application
Using Conversion functions in 4.Template
5. Using the template's custom interface
6.XTemplate applications

One: Ext.domhelper
A utility class that handles the DOM or template (Templates). HTML fragments (HTML fragments) or DOM can be written in a clearer way than JavaScript.

Two: Common methods:

Three: Introduction to template Syntax usage

In some complex situations, we need to generate HTML fragments, and the most common, simplest, and most efficient way to do this is to apply the template provided by Ext.

Description: Templete is the meaning of the template, that is, to define a piece of HTML code, and put several {} as placeholders,

The runtime populates the data into {}. Looks like the Messageformat in Java and the string.formate in C #.

Xtemplate and Domhelper have a very deep source, Domhelper is Xtemplate's little brother, Domhelper can not solve the things, xtemplate must be.

Four: The use of xtemplate generally go through three steps:

1, define the Xtemplate object, specify a section of HTML code as a template;

2. Specify the location where the HTML defined in the Xtemplate should be placed and populate the placeholder information;

3, compile xtemplate.

Five: Template Simple application

Ext.onready (function () {var xt = new Ext.template (    "<table border={0} width={1}>",     "<tr>",      " <td>{2}</td> ",      " <td>{3}</td> ",      " <td>{4}</td> ",    " </tr> ",    "</table>");  

Xt.append ("XT", [1, 300, ' cell 1 ', ' cell 2 ', ' cell 3 ']); Xt.compile (); })

VI: When you instantiate a template, you can configure any parameter that will automatically connect to it, which seems to be more convenient and better read.

Append method and Domhelper Append method, in fact there are InsertBefore, InsertAfter, Insertfirst, overwrite and other methods,

The difference is the second parameter, which is the data to be populated into placeholders, either an array or a JSON object. After execution, the following results are obtained:

<div id= "XT" >

<tbody>

<td> Cell 1</td>
<td> Cell 2</td>
<td> Cell 3</td>

</tbody>

The following is an example of a retrofit where the data is populated with a JSON object instead of the original array:

"<tr>",
"<td>{v1}</td>",
"<td>{v2}</td>",
"<td>{v3}</td>",
"</tr>",
"</table>");

Xt.compile ();

Seven: Use the conversion function in the template:

var xt = new Ext.template (                    "<table border={b} width={w}>",                    "<tr>",                    "<td>{v1}</td > "," <td>{v2:trim}</td> "," <td>{v3:ellipsis (4)}</td> ",                    " </tr> ",                    " </ Table> ");            Xt.append ("XT", {b:1, w:300, v1: ' cell 1 ', V2: ' Cell 2 ', V3: ' Cell 3 '});            Xt.compile ();

Eight: Custom interfaces using templates

javascript code var data = [[' 1 ', ' Male ', ' name1 ', ' descn1 '], [' 2 ', ' Female ', ' Name2 ', ' descn2 '], [' 3 ', ' Male ', ' name3 ', ' descn3 '], [' 4 ', ' Female ', ' name4 ', ' descn4 '], [' 5 ', ' Male ', ' name5 '  , ' Descn5 ']; Custom interface var t = new Ext.template (' <tr> ', ' <td>{0}</td> ', ' <td>{1: This.rendersex}</td> ', ' <td>{2:trim}</td> ', ' <td>{3:ellipsis (Ten)}</td> ', ' </tr> ' 

T.rendersex = function (value) {        if (value = = ' Male ') {            return ' <span style= ' color:red;font-weight:bold; ' > Red male </span> ";        } else {            return "<span style= ' color:green;font-weight:bold; ' > Green female </span> ";        }    };    T.compile ();//loop to derive data for    (var i = 0; i < data.length; i++) {        t.append (ext.get (' some-element '), Data[i]);    }

HTML code <table border= "1" >            <tbody id= "some-element" >                <tr>                    <td>id</td>                    <td>sex</td>                    <td>name</td>                    <td>descn</td>                </tr>            </tbody></table>

Nine: Complex templates

Xtemplate has enhanced the functionality of the template,

Xtemplate not only supports the use of sub-templates within templates, but also features for and if.

Allows us to implement functions such as looping and judging in the template

1, interface Html:<form id= "F" ></form>2, js:var data = {        name: ' s ',        size:5,        options: [            {value: ' Hebei ' , text: ' Hebei Province '},            {value: ' Tangshan ', text: ' Tangshan '},            {value: ' Northbound ', text: ' Lubei District '}        ]    };    var t = new Ext.xtemplate (        ' <select name= ' {name} ' size= ' {size} ' > ',            ' <tpl for= ' options ' >< Option value= "{Value:trim}" >{text:ellipsis (Ten)}</option></tpl> ',        ' </select> '    );    T.append (' f ', data); Ext.onready (function () {    var data = {        name: ' s ',        size:5,        options: [' Hebei Province ', ' Tangshan ', ' Lubei District ']    };    var t = new Ext.xtemplate (        ' <select name= ' {name} ' size= ' {size} ' > ',            ' <tpl for= ' options ' >< Option Value= "{.: Trim}" >{.:ellipsis (Ten)}</option></tpl> ',        ' </select> '    );    T.append (' f ', data);});

Another example:

 Ext.onready (function () {var data = {Name: "Blog Park",                READ: [{book: ' <<asp.net Advanced Programming >> ', Date: ' 2007-7-7 ' }, {book: ' << design mode >> ', Date: ' 2006-6-6 '}]} 

Render component var Mypanel = new Ext.panel ({width:400, id: "Mypanel", Title: "Xtemplatedata Simple Example", RenderTo:Ext.getBody ()});

To create a template:

                var TPL = new Ext.xtemplate (                ' <table><tr><th> name:{name}</th></tr> ',  //// For a one-dimensional single data object, directly with {name} output,                ' <tr><td> ',                ' <tpl for= ' read ' > ',///For multidimensional objects (such as tables with multiple data),                     ' <p > Number: {#}, Book: {books}, date:{date}</p> ',                ' </tpl></td></tr></table> '            );                Rewrite the binding template (//populate the data into the template and render to the target component)                Tpl.overwrite (mypanel.body, data);            });

A brief description follows:

1.tpl.compile ();//You can add tpl.compile () after creating the template, and compile the code faster.
2. Tpl.overwrite (mypanel.body,data);//fill the data into the template and render to the target component
3. Name: {name}//for one-dimensional single data object, directly with the {name} output,
4.,<TPL for= "read" >//for multidimensional objects (such as tables with multiple data), using the TPL and for mates, the data is output in the form of a TPL, read as a parent node
5.{.} For one-dimensional objects of data, such as color: [' Red ', ' Blue ', ' Black '], you can use {.} Output per TPL template, such as:

' <tpl for= ' color ' > ',
' <div> {.} </div> ',
' </tpl> '

6.{#}//an index that represents a loop
7.parent.***//access the Parent object element in the child object, using parent, such as: {Parent.name}
8.if//' <tpl if= ' age &gt; 1 ">",
' <p>{name}</p> ',
' </tpl> ',
If the conditional logical judgment is implemented, it is easy to use
9. Several other commonly used parameters:
xindex//the current index of the Loop template index (starting at 1), with [].
xcount//the number of cycle template loops. with []

' <tpl for= ' Read > ',
' <p> number: {#}, Book: {books}, Date: {date}, parity: {[xindex%2==0? ' Even ":" Odd "]}, Number of:{[xcount]}</p> ',
' </tpl> '

10. Template member functions:

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 < 1;     

11. Example Exercises:

<link href= "Extjs/resources/css/ext-all.css" rel= "stylesheet" type= "Text/css"/> <script src= "extjs/ Ext-base.js "type=" Text/javascript "></script> <script src=" extjs/ext-all.js "type=" Text/javascript " ></script> <style type= "Text/css" > Body {font-size:12px} #co           Ntainer {border:1px solid black;           width:330px;           } td,th {border-bottom:1px dashed black;               } th {text-align:center;            }. namewidth {width:120px;               }. urlwidth {width:150px;        } </style> <script type= "Text/javascript" > var mydata; Ext.onready (function () {new Ext.button ({text: "Query for records larger than the specified ID value", handler:function () {Ext.Ajax.request ({URL: "Getxtemplatedata.aspx?id= "+ ext.get (" LinkId "). Dom.value,//Get the value of the text box Success:function (request) {                            MyData = Request.responsetext;                            MyData = eval (' (' + MyData + ') '); var tpl2 = new Ext.xtemplate (' <table><thead><tr><th> number </th>< Th class= "Namewidth" > Name </th><th class= "Urlwidth" > Address </th><th> location </th></tr> </thead><tbody> ', ' <tpl for= ' results ' > ', ' <t R><td>{#}</td><td>{linkname}</td><td>{linkurl}</td><td>{linkpos} </td><tr> ', ' </tpl></tbody></table> ')                            ;                            Tpl2.compile ();                        Tpl2.overwrite (Ext.get ("container"), MyData);   },                     Failure:function () {alert ("failure!");                }                    });        }}). Render (Document.body, "Head");    }); </script>
Ext.js Getting Started: Templates (iii)