Use of extjs template: Ext. xtemplate

Ext. onready (function (){
Ext. onready (function (){
// Define the template using the tag TPL and operator
VaR tpl1 = new Ext. xtemplate (
'<Table border = 1 cellpadding = 0 cellspacing = 0> ',
'<Tr> <TD width = 90> name </TD> <TD width = 90> age </TD> </tr> ',
'<TPL for = "."> ',
'<Tr> <TD >{name} </TD> <TD> {age} </TD> </tr> ',
'</TPL> ',
'</Table>'
);

// Parse the JSON object {stature: This. parsejson ()} using a custom Formatting Function ()}
VaR tpl2 = new Ext. template (
'<Table border = 1 cellpadding = 0 cellspacing = 0> ',
'<Tr> <TD width = 90> name </TD> ',
'<TD width = 120 >{name} </TD> </tr> ',
'<Tr> <TD width = 90> age </TD> ',
'<TD width = 120 >{age} </TD> </tr> ',
'<Tr> <TD width = 90> height </TD> ',
'<TD width = 120 >{stature: This. parsejson ()} </TD> </tr> ',
'</Table>'
);

Tpl2.parsejson = function (JSON ){
Return JSON. Num + JSON. Unit;
}

// Array index and simple mathematical operation {#} each item is appended with the serial number
VaR tpl3 = new Ext. xtemplate (
'<Table border = 1 cellpadding = 0 cellspacing = 0> ',
'<Tr> <TD> NO. </TD> <TD width = 90> name </TD> <TD width = 90> salary </TD> </tr> ',
'<TPL for = "."> ',
'<Tr> <TD >{#}</TD> <TD >{name} </TD> <TD> {Wage *. 9} </TD> </tr> ',
'</TPL> ',
'</Table>'
);

// Automatically render a simple array. use special variable {.} to output cyclically.
VaR tpl4 = new Ext. xtemplate (
'<Table border = 1 cellpadding = 0 cellspacing = 0> ',
'<Tr> <TD> NO. </TD> <TD width = 90> name </TD> </tr> ',
'<TPL for = "."> ',
'<Tr> <TD >{#}</TD> <TD >{.} </TD> </tr> ',
'</TPL> ',
'</Table>'
);

// The basic conditional logic determines that there is no else operator. If necessary, write two if statements with the opposite logic.
// Output the employee information salary of more than 1000x0.9
VaR tpl5 = new Ext. xtemplate (
'<Table border = 1 cellpadding = 0 cellspacing = 0> ',
'<Tr> <TD> NO. </TD> <TD width = 90> name </TD> <TD width = 90> salary </TD> </tr> ',
'<TPL for = "."> ',
'<TPL if = "Wage & gt; 1000"> ',
'<Tr> <TD >{#}</TD> <TD >{name} </TD> <TD> {Wage *. 9} </TD> </tr> ',
'</TPL> ',
'</TPL> ',
'</Table>'
);

// Define the combox template xindex: if it is a loop template, This is the index of the current loop (starting from 1 ).
// Values: value in the current scope
VaR itemtpl = new Ext. xtemplate (
'<TPL for = "."> ',
'<Div class = "X-combo-list-item {[xindex % 2 = 0? "Even": "odd"]} "> ',
'{#}: {[This. Check (values)] }</div> ',
'</TPL> ',
{
Check: function (values ){
If (values. value> 2 ){
Return "<font color = Red>" + values. Item + "</font> ";
} Else {
Return "<font color = blue>" + values. Item + "</font> ";
}
}
}
)
New Ext. Form. formpanel ({
Applyto: 'target ',
Title: 'Use template in extjs components ',
Labelseparator: ', // delimiter
Height: 100,
Frame: True,
Width: 350,
Items :[
New Ext. Form. ComboBox ({
Fieldlabel: 'combo ',
Displayfield: 'item ',
Valuefield: 'value ',
TPL: itemtpl, // introduce a custom template
Editable: false,
Mode: 'local ',
Triggeraction: 'all ',
Store: New Ext. Data. simplestore ({
Fields: ['item', 'value'],
Data: [['entry 1', 1], ['entry 2', 2], ['entry 3', 3],
['Entry 4', 4], ['entry 5', 5], ['entry 6', 6]
})
})
]
});


VaR producttpl = new Ext. xtemplate (
'<Tr> <TD> {0} </TD> <TD> {1} </TD> <TD> {2} </TD> </tr>'
);
Ext. Get ('addproduct'). On ('click', function (){
VaR pname = ext. Get ('productname '). getvalue ();
VaR pnum = ext. Get ('productnum'). getvalue ();
VaR pprice = ext. Get ('productprice'). getvalue ();
Producttpl. append ('product-table', [pname, pnum, pprice]);
});

// Define template data
VaR data1 = [
{Name: 'zhang san', age: 20 },
{Name: 'lily', age: 25 },
{Name: 'wang 5', age: 27 },
{Name: 'zhao liu', age: 26}
];

VaR data2 = {
Name: 'Tom ',
Age: 24,
Stature :{
Num: 170,
Unit: 'centimeter'
}
};

VaR data3 = [
{Name: 'zhang san', wage: 1000 },
{Name: 'lily', wage: 1200 },
{Name: 'wang 5', wage: 900 },
{Name: 'zhao liu', wage: 1500}
];

VaR data4 = ['zhang san', 'Li si', 'wang wu', 'zhao liu'];


// Combine the template value and template and insert the newly generated node into the element with the ID of 'tpl-table'
Tpl1.append ('tpl-1', data1 );
Tpl2.append ('tpl-2', data2 );
Tpl3.append ('tpl-3', data3 );
Tpl4.append ('tpl-4', data4 );
Tpl5.append ('tpl-5', data3 );
});
});

 

HtmlCode:

<Div id = 'tpl-1'> </div>

<Br>
<Div id = "tpl-2"> </div>
<Br>
<Div id = "tpl-3"> </div>
<Br>
<Div id = "tpl-4"> </div>
<Br>
<Div id = "tpl-5"> </div>
<Br>
<Div id = "target"> </div>
<Br>
Product Name: <input type = "text" id = "productname"> <br>
Product Quantity: <input type = "text" id = "productnum"> <br>
Product Price: <input type = "text" id = "productprice">
<Input type = "button" value = "add product" id = 'addproduct'>
<Table id = 'product-table' border = 1 cellspacing = 0 cellpadding = 0>
<Tr>
<TD width = 160> product name </TD> <TD width = 75> quantity </TD> <TD width = 75> amount </TD>
</Tr>
</Table>