Reusable XTemplate Manager Design Pattern

[tchan4209]

I'm working on a Sencha Touch app with 200 screens. Many of the screens share common UI elements, so in a fit of refactoring I created an XTemplate Manager to store XTemplate code.

XTemplateManager = {
    getTpl: function(name) {
        return new Ext.XTemplate(this.tpl[name]);
    },


    tpl: {
        'myTpl': '<div class="contacts">{firstName}</div>
    }
}

This was great where the XTemplate was heavily reused. However, it has started to become a giant file that is hard to navigate. Also it's another layer of indirection when I separate out the XTemplate from it's view.


Is this a good design pattern? Is there another solution to externalize XTemplates for reuse? Just curious how others do it. Thanks.


(I've only worked with Sencha Touch but I think this should apply to Ext as well.)

[mitchellsimoens]

I have done just this as part of my locale so it's not a bad thing. MVC is great but you can still have utility classes like this.