Use RactiveJS to replace ExtJS's templates (for ExtJS 4.0+)

Example-Handlebars-Template.handlebars

<button class="btn">{{button-label}}</button>

Exmple-Ext-Template.js

Ext.define('MyApp.Path.To.Your.JS-String.template.Example-Ext-Template', {
  requires: [ ],
     
  template: '<button class="btn">{{button-label}}</button>'
});

Extended-RactiveWrapper.js

Ext.define('MyApp.myComponent.view.MyExtendedRactiveWrapper', {
  extend: 'MyApp.component.RactiveWrapper',
  alias: 'widget.MyExtendedRactiveWrapper',
  
  // Inherited Properties
  // ractive
  // ractiveTemplate
  // ractiveConfig
         
  requires: 'MyApp.myComponent.controller.MyExtendedRactiveWrapper-Controller',
            
  ractiveTemplate: Ext.create('MyApp.Path.To.Your.JS-String.Ractive.Template'),
  // OR
  // ractiveTemplate: Ext.create('MyApp.path.to.your.PreParsed.Ractive.Templates').button,
            
  ractiveConfig: {
    "set-custom" : "Ractive config options here"
    "data": {
      "your-ractive-data" : ["goes", "here"]
    }
  }
  
  /* 
    Apply Ractive events to your new comonent in afterRender.
    Be sure to 'callParent' first.
  */
  afterRender: function() {
    var me = this;
    this.callParent(arguments);
    //register event listeners and dispatch Ext.js events from the view
    //the RactiveWrapper base class contains a beforeDestroy listener wich then
    //calls the ractive.tearDown() function which removes all listeners
    this.ractive.on({
      activate: function(){
        me.fireEvent('ractiveActivate', event);
      }
    });
  }

});

RactiveWrapper.js

/**
 * @class MyApp.component.RactiveWrapper
 * @extends extends Ext.Component
 * 
 *  ------ How to Use -------

1. Extend Ractive Wrapper in your own component class
    -- see example below: Extended-RactiveWrapper.js
    
2. Create your Ractive Template in an Ext Component (for prerendering)
    -- see example: Exmple-Ext-Template.js
   
   OR
   
   Pre-Parse HTML/Handlebar templates using Grunt: https://github.com/alisonailea/grunt-extjsractive-parse
    Put it in your templates folder.
    -- see example: Example-Handlebars-Template.handlebars
 *
 */
Ext.define('MyApp.component.RactiveWrapper', {
    extend: 'Ext.Component',
    alias: 'widget.ractiveWrapper',

    cls: 'ractive-wrapper',

    /**
    * @property
    * Parent property
    */
    width: '100%',
    height: '100%',
    style: 'overflow: auto',

    ractive: null,

    config: {
        ractiveTemplate: null,
        ractiveConfig: {}
    },

    constructor: function(configs) {
        this.callParent(arguments);
        this.initConfig(configs);
        this.createRactiveTemplate();
        if(this.ractiveConfig){
            this.loadRactiveConfig(this.ractiveConfig);
        }
    },

    initComponent: function(){
      this.callParent(arguments);
    },

    afterRender: function(){
        // afterRender is the only place reliable to get the dom element
        this.ractive.insert(this.getEl().dom);
    },

    beforeDestroy: function() {
      this.ractive.teardown();
    },

    createRactiveTemplate: function(){
        this.ractive = new Ractive({
            template: this.getRactiveTemplate()
        });
        this.ractive.update();
    },

    loadRactiveConfig: function(config) {
        for(var key in config){
            if (config.hasOwnProperty(key)){
                this.ractive[key] = config[key];
            }
        }
        this.ractive.update();
    }


});