I've written an extension to Ext.XTemplate that allows full-blown ExtJS 4 components to be injected as template values. It was originally just part of my Component Column class but it seemed worth the effort to promote it to a UX in its own right.

When the template is run it injects placeholder HTML rather than the component. Once that placeholder HTML makes it to the DOM the component is switched back in. Sometimes this technique causes sizing or scrollbar issues. It should be used only where it is suitable, it isn't a panacea.

Most use cases for a CTemplate involve wanting to inject a component where the only means provided for simple customization is a template or possibly even raw HTML. As such they are a way of subverting the design decisions taken by other developers and should be used with appropriate caution.

An example:

var template = Ext.create('Skirtle.CTemplate', 
        '{label} {button}', 
template.overwrite(, { 
    label: 'Thomas', 
    button: Ext.create('Ext.button.Button', { 
        text: 'Edit' 
No attempt is made to manage the size or destruction of the components.

There are several similar UXs already in circulation. To list a few: