From Sencha - Learn

This tutorial expands upon Ext's templating engine and Shea Frederick's tutorial Getting Started With Templates. It assumes that you know the basics of working with Templates and have The syntax for using formatting functions is "{VARIABLE:<FORMATFUNCTION>[(OPTIONALPARAMS)]}".

Let's Get Started

Suppose we want to output a variable named content but we are afraid that it may take too much space. A useful feature would be able to truncate this content to 50 characters and show the user a link to view all of the content. We can use the formatting function "ellipsis" to truncate the content to only 50 characters. This function will also append "..." to indicate to our users that there is actually more content but it has been truncated.

Our template would look like this:

var myTpl = new Ext.Template(
    '<div>{content:ellipsis(50)}<br/><a href="{moreLink}">Read More</a></div>'
);

Technically, content is only going to show 47 characters, the "..." will be the additional 3 characters to make a total of 50.

Here is a list of the formatting functions which you can use with Templates:

• ellipsis(length): Abbreviate your variable to a specified length and append "...". Useful for when you want to only show the first x characters and then provide a more detailed view.
• undef: If the variable is undefined show "" instead of "undefined"
• htmlEncode: If the variable contains ampersands, less than, greater than symbols or quotes HTML escape them.
• trim: If the variable contains extra whitespace, trim it.
• substr(start, length): Substring the variable
• lowercase: Transform the variable to all lowercase.
• uppercase: Transform the variable to all uppercase.
• capitalize: Capitalize the first letter of the variable, the remaining characters will be transformed to lowercase.
• usMoney: Format in US Dollars. ie: $10.97
• date[(format)]: Transform the variable to a date format, if the format argument is omitted uses the mask 'm/d/Y'
• stripTags: Strips the variable of all html tags.

You can also create your own custom formatting functions by adding a new method to your template instance and calling it by preprending this. to your format function like this "{VARIABLE:this.<FORMATFUNCTION>}"

Here is a sample which adds a new function called yesNoFormat to an instance of a template. yesNoFormat is similar to a ColdFusion function which converts 'truthy' values to the word "Yes" and 'falsey' values to the word "No".

var testCustomTpl = new Ext.Template(
    '<div>User: {username} IsRevoked: {revoked:this.yesNoFormat}</div>'
);
testCustomTpl.yesNoFormat = function(value) {
	return value ? 'Yes' : 'No';
};		
testCustomTpl.append(document.body, {username: 'aconran', revoked: 1});

What's Next

In my opinion the easiest way to excel at learning the Ext framework is to open up the source in your favorite IDE and read. You're sure to learn some new tricks and pick up on some good habits. You may also discover some 'gems' which have unfortunately been yet to be documented. After getting through the basics of using Templates and utilizing the formatting features the next step is to learn about MasterTemplates. MasterTemplates provide you with a way to have child templates and loop through datasets easily while maintaining all of the functionality of Templates.

• Ext Programmer's API Documentation
• Ext User Forums

This page was last modified on 23 July 2007, at 18:30. This page has been accessed 33,782 times.