Templates

In the Ext JS library, we have two types of templates: Ext.Template and Ext.XTemplate. Let's see what the main differences between these two classes are:

• Ext.Template represents an HTML fragment. This one, in my personal opinion, can be used in small things or simple representations.

• Ext.XTemplate extends the Ext.Template class and provides advanced functionality.

Ext.Template

Let's look an example of Ext.Template:

Ext.onReady(function(){
  Ext.tip.QuickTipManager.init();
  var myTemplate = new Ext.Template([ //Step 1
    '<div class="container">','<div class="header">',
    '<img src="images/{logo}"width="88" height="53" alt=""/>',
    '<span>{titlecontents}</span><br>','</div>',
    '<div class="bookscontainer">','<span class="book">',
    '<img src="images/{book_a}" width="112" height="138" alt="" data-qtitle="Hot book" data-qtip="This is another great book for EXT JS!" />',
    '</span>','<span class="book"&gt...