Un exemple ExtJS pour une petite classe avec un template

tpl.js

/**
 * A template desc panel base class
 * 
 * @class MODx.DescPanel
 * @extends Ext.Panel
 * @param {Object} config An object of options.
 * @xtype modx-desc-panel
 */
MODx.DescPanel = function(config) {
    config = config || {}; 
	this.startingMarkup = new Ext.XTemplate('<tpl for=".">'
		+'<div class="panel-desc loading"><p>{message}</p></div>'
	+'</tpl>', {
		compiled: true
	});
	Ext.applyIf(config,{
		frame:false
		,startingText: 'Loading...'
		,markup: '<div class="panel-desc {cls}"><p>{message}</p></div>'
		,plain:true
		,border: false
	});
	MODx.DescPanel.superclass.constructor.call(this,config);
	this.on('render', this.init, this);
}
Ext.extend(MODx.DescPanel, Ext.Panel,{
	init: function(){
		this.reset();
		this.tpl = new Ext.XTemplate(this.markup, { compiled: true });
	}

	,reset: function(){	
		this.body.hide();
		this.startingMarkup.overwrite(this.body, {message: this.startingText});
		this.body.slideIn('r', {stopFx:true, duration:.2});
		Ext.getCmp('modx-content').doLayout();
	}
	
	,updateDetail: function(data) {		
		this.body.hide();
		this.tpl.overwrite(this.body, data);
		this.body.slideIn('r', {stopFx:true, duration:.2});
		Ext.getCmp('modx-content').doLayout();
	}
});	
Ext.reg('modx-template-desc-panel',MODx.DescPanel);