CTemplate - Components in Templates

[skirtle]

http://skirtlesden.com/ux/ctemplate

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', 
    '<div>', 
        '{label} {button}', 
    '</div>' 
); 
 
template.overwrite(Ext.fly(...), { 
    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:

• ExtJS 3 HtmlLayout: http://www.sencha.com/forum/showthread.php?79191
• ExtJS 3 ComponentDataView: http://www.sencha.com/forum/showthread.php?79210
• An XTemplate override in Touch: http://www.sencha.com/forum/showthread.php?114317

[mberrie]

Nice! Good to know that now there is an Ext4-ready solution for this kind of technique!

[ajaxvador]

+1

[Lilliana]

This extension is just what I need. This will surely save me lots of time on my current project that I have in development. I have been looking for a template extension like this one to help make my work process more efficient. It seems like I waste a great deal of my time with tedious tasks such as setting up new pages and tables and such. I really love the idea of only having to set everything up once. Thanks a lot.

[LisburnLad]

Hi Skirtle,
I was wondering if you'd had a chance to try out your CTemplate with the new 4.1 Beta release? I had been using your CTemplate in version 4.0.7 and it was all working very nicely. I've just upgraded to 4.1 and now everything has stopped working at the point where I try to append the template.

I know that XTemplates and overrides were 2 of the areas changed in version 4.1.

Thanks for any feedback.
Steve

[skirtle]

I think I have it working with 4.1.0-beta-1 but I'm not going to release it until 4.1.0 is released. I'll send you a preview by PM.

[Jad]

Hello,
Can I have o complete example to use this plugin

Thanks a lot

[skirtle]

There are two complete examples if you just follow the link to the download page.

[skirtle]

Apologies for not yet releasing a version that's compatible with 4.1, I'll do it as soon as I find time.

If anyone needs a quick patch for the stack overflow then you just need to swap around the dependency between apply and applyTemplate. Should be a 2-line change, renaming the method on line 26 and switching round the alias at the end.

[Jad]

Very great plugin ;-)