Ext JS is a powerful web framework that helps develop organized consistent applications. It adopts a Rich Client UI programming model that promotes component re-usability.

One of the more powerful features of Ext JS is the XTemplate. This allows a developer to build custom components without having to do it all yourself through a custom renderer.

The constructor of XTemplate is the best available documentation out there. Below are a few pieces of information learned while using XTemplates.

  • XTemplates can be used within Grids with the xtype of templatecolumn. This allows a powerful combination of the Ext JS grid with customized display logic
  • Before Ext JS 4.1, there was no else statement in XTemplate columns. If you wanted to conditionally display content, you’d have to use tpl if=”“ statements together. With 4.1 and greater there is the tpl elseif=”“ and tpl else statements.
  • If the XTemplate is coming from a component backed by a Store, the template can access any field in the store.
  • Functions can be directly added to the XTemplate. This is a nice way to organize more complex rendering logic.
  • Code can be embedded into the XTemplate using the {[ .. ]} operator. The ternary operator can be especially handy in this scenario. i.e.

Full example of a XTemplate:

var tpl = new Ext.XTemplate(
    '',
    '
', '{value}', '(HIGH)', '(LOW)', '
', '
', { disableFormats: true, isHigh: function(value){ return value > 50; } } );

More Information:
Ext JS XTemplate Docs