Custom formatting of extjs templates

Http://extjs.com/learn/Tutorial:Utilizing_Format_Features_of_Templates)

Suppose we want to print the content from a variable, but the content may occupy too much space. In this case, you can intercept the content within 50 English characters,
Make a connection and let the user click to view the full text. Function "ellipsis"
In this way, it can be limited to any number of characters. In addition, after the string is intercepted, the function will add "..." to show more actual content.

A template is shown as follows:

VaR mytpl = new ext
. Template (

'<Div >{ content: ellipsis (50)} <br/> <a href = "{morelink}"> Read More </a> </div>'

);

After processing, 47 characters belong to the content, and the other three characters are "...", with a total of 50 characters.

This is a list of functions that can be used for template formatting:

* Ellipsis (length)-crop a string greater than the specified length to display the ellipsis. Applicable to displaying only the first n characters, and then providing detailed page links.

* UNDEF-check whether a value is underfined. If yes, convert it to a null value.

* Htmlencode-conversion (&, <,>, and ') characters

* Trim-Trim unnecessary spaces before and after a piece of text

* Substr (START, length)-returns a substring of the specified length starting from the specified position.

* Lowercase-returns a string in which letters are converted to lowercase letters.

* Uppercase-returns a string in which letters are converted to uppercase letters.

* Capitalize-returns a string in which the first letter is converted to an upper-case letter and the remaining one is lower-case.

* Usmoney-format the number to the dollar currency. Example: $10.97

* Date [(Format)]-parses a date into a date in a specific format mode. If the date string is not input, the default value is "month/day/year"

* Striptags-strip all HTML tags of Variables

You can also create a custom Formatting Function. Specifically, add a new method to the template instance and call it on the template. The formatting function should be like this: {Variable: This. <formatfunction> </formatfunction> }"

This is a simple instance, adding a new function "parsejson" to the template instance.

JS Code

1. VaR
   Tplfun =
   New
   EXT
   . Template (
   
2. '<Table border = 1 cellpadding = 0 cellspacing = 0>'
   ,
   
3. '<Tr> <TD width = 90> name </TD>'
   ,
   
4. '<TD width = 120 >{name} </TD> </tr>'
   ,
   
5. '<Tr> <TD width = 90> age </TD>'
   ,
   
6. '<TD width = 120 >{age} </TD> </tr>'
   ,
   
7. '<Tr> <TD width = 90> height </TD>'
   ,
   
8. '<TD width = 120 >{stature: This. parsejson ()} </TD> </tr>'
   ,
   
9. '</Table>'
   
   
10. );
11. VaR
    Data = {
    
12. Name: 'Tom'
    ,
    
13. Age: 24,
14. Stature :{
15. Num: 170,
16. Unit: 'centimeter'
    
    
17. }
18. }
20. Tplfun. parsejson = Function
    (JSON ){
    
21. Return
    JSON. Num + JSON. Unit;
    
22. }
23. Tplfun. append ('tpl-table'
    , Data );