View Full Version : Reusable XTemplate ExtJs 4.1

7 May 2012, 10:25 AM
I've searched and searched - so please pardon the newb here.

Trying to reuse XTemplate - easily able to render within the new view class but when trying to leverage single instance of XTemplate...fail.


Ext.define('App.ux.RecentItems', {
extend : 'Ext.Component',
alias : 'widget.recentitems',
alternateClassName: 'App.RecentItems',

config : {
moduleTpl : [
'<div class="sidebarModuleHeader">',
'<h2>Recent Items</h2>',
'<div class="sidebarModuleBody">',
'<div id="01" class="mruList individualPalette">',
'<tpl for=".">',
'<div class="hov-enable leadBlock " id="hoverItem{#}">',
'<div class="mruItem" id="{#}">',
'<a href="" class="leadMru" accesskey="{#}" tabindex="0">',
'<img src="resources/img/s.gif" alt="Lead: {firstName} " class="mruIcon">',
'<span class="mruText">{company} {dts_c}</span>',

constructor : function (config) {
return this;

Trying to call that in Ext.view.View -- using tpl: new App.ux.RecentItems...

I've got store, model, views all in Controller (this is MVC app)...and to date have not been able to successfully get it to work.

Any help, I've looked at literally all example, the calendar app, etc. and have simply continued to blow it. What is the best way to create single XTemplate that would be used multiple times in multiple views with varying store(s)?

Any help appreciated.

14 May 2012, 5:40 PM
If you want to setup reusable xtemplates, simply stuff them in a namespace that can be referenced from within the application.

for example.

MyApp.tpls.WhateverTemplate = Ext.create('Ext.XTemplate' ...); You use UpperCase because it's a singleton instance of a class.