Category: Code Examples

Problem

You want to use an html template within client-side ExtJS code.

Tested in ExtJS Version

4.1.1

Screenshot

Solution
Use ExtJS’s xtemplates.

 Ext.onReady(function() {
  var trackStore = new Ext.data.Store({
    storeId: 'soundCloudStore',
    proxy: {
      type: 'ajax',
      url: 'blues.json',
      reader: {
        type: 'json',
        idProperty: 'id'
      }
    },
    fields:['duration', 'genre', 'created_at', 'kind', 'title', 'id']
  });
  trackStore.load(
    function(records, operations, successful) { 
      var panel =  Ext.create('Ext.panel.Panel', {
        title: 'Tracks',
        store: trackStore,
        height: 190,
        width: 550,
        renderTo: Ext.getBody()
  });

  var tpl = new Ext.XTemplate(
    '',
      '',
      'Title: {title}',
        '',		  '
      'Genre: {genre}',
        '',
        '',
           'Duration: {duration}',
        '',
      '',
    ''
  );
  tpl.overwrite(panel.body, records);

  });
})
]]>

Discussion

A popular alternative to ExtJS templates is eJS:
http://embeddedjs.com/

See also the ExtJS ToolTips for an example of where this could be used, and the ExtJS ListView example to see another rendition of the same data..