Today I’ve searched all over the web sites to find some basic Ext JS template definitions and could not find a good resource as I needed. So, I decided to bring out one myself. Hope you will enjoy.

Basics

Ext JS templates have their own parsing algorithms that needs to be compiled before used and here is a quick start to it.

Defining Variables

If you would like to add variables on the template you need to surround the variable name with curly parentheses (‘{‘ and ‘}’ ).

Example:

{variable_name}

Using Variables in Texts

To add variables into the predefined texts you can just add the variable with curly parentheses where you want to put the variable.

Example:

This page has {page_picture_count} pictures.

Using HTML Tags on Templates

It is the same way you add html tags on your Ex JS template as adding predefined text.

Example:

<a id="{id}" href="{url}">{text}</a>

Conditions

You can set conditions to perform on template rendering to the parameter as well. How you do this is pretty simple.

Form:

<tpl if="your condition">{field}</tpl>

Example 1 (If condition):

<tpl if="{field}=='Good Example'">{field}</tpl>

With this template what ever else the field variable is will not be evaluated except if it is equal to ‘Good Example’ string.

Loops

You can use loops when you need to output a list of variables.

Example:

<tpl for="{parent}">{child}, </tpl>

With this template for each child in parent will be separated with columns.

Example 2 (If and Else If condition):

<tpl if="{field}=='Good Example'">{field}</tpl>
<tpl if="{field}=='Else Example'">{field}</tpl>

With this template what ever else the field variable is will not be evaluated except if it is equal to ‘Good Example’ or ‘Else Example’ string.

Using Predefined Functions on Templates

Ext JS has internal Template functions that are useful for your templates.

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.

Example:

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

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 rwhite space, 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 prepending 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});

Note: This post will continue when I found something else and developing some examples on Ext JS Templates.

I was trying to migrate from Ext JS 3 to Ext JS 4 and could not manage to fix all the problems that occurred with the developed Ext JS 3 project of mine. Then I tried to figure out if I could build a complete application from beginning and if there is any easy way to do that. Finally I decided not to start anything about migration at this point of the project when I do not really need it because it will take too much time to finish the project of which I don’t have.

Later I’ll do the migration with another project I suppose.

Today I feel very lucky and I decided to migrate all my application that I build on the Advertisement Agenda project and may be I can find some easy ways of migration. This is the first time I intend to migrate any older version of a framework in the middle of a project. Let’s see what is waiting for e .

By the way, there is a complete tutorial and an easy way of doing the migration with a compatibility tool that you should install. But I want to have complete new start with Ext JS 4. And why I need to migrate is the API that I use is not compatible with the application I’m developing. It is really become a confusion for me.  Here I go..

Step By Step Migration Plan

1. Backup Project Files for later needs
2. Download new release of Ext JS from http://www.sencha.com/products/extjs/download/
3. Just change the base ext file path to the new one.
4. Try it out.
5. If there has been a problem, try to figure out what is it and solve the problem.
6. Continue to the 4th step until there is no problem.
7. If I still came up nowhere, start to build a complete new application.

So, how did it go? I did the first 4 steps and jump to the 7th one . It looks like I need a complete new application.

Here what it is! There is not enough documentation about the steps to build an application from start. I decided watch those videos first:

I must say, I’m stucked! I’ll go through examples, that will do.

Ext JS 4.0 API

After Sencha own  Ext JS, they have started to build a new corporation face from beginning and recently the realized new version of Ext JS with customizable templates. I wanted to post this review to share new API link at Ext JS API. For me it is really slow and there are many links that are actually old version API and not working properly. I’ll keep waiting for the changes on the documentation and love it anyway to figure out more “how to do”s on it.

Find out new API at http://dev.sencha.com/deploy/ext-4.0.0/docs/
Find more information about ExtJS at http://www.sencha.com/products/extjs/