View Full Version : TemplatePanel

8 Aug 2008, 4:52 AM
Based on this post http://extjs.com/forum/showthread.php?t=22386&highlight=templatepanel i've created a TemplatePanel, derived from Ext.Panel but accepts one extra paramater, a Ext.(X)Template (string or instance).
The template combined with json can be used to update the body of the panel..
The normal panel.load(..) can be used to load the json from the server.

* @class Ext.ux.TemplateRenderer
* Template / Json renderer. Updates the elements innerHTML with the template and JSON responseText.
Ext.ux.TemplateRenderer = function(tpl){
if (Ext.type(tpl) == 'string'){
tpl = new Ext.Template(tpl);
tpl.disableFormats = true;
this.tpl = tpl;
Ext.ux.TemplateRenderer.prototype = {
* This is called when the transaction is completed and it's time to update the element - The ux.TemplateRenderer
* updates the elements with the template and the returned JSON,
* @param {Ext.Element} el The element being rendered
* @param {Object} response The XMLHttpRequest object
* @param {Updater} updateManager The calling update manager
* @param {Function} callback A callback that will need to be called if loadScripts is true on the Updater
render : function(el, response, updateManager, callback){
var json = Ext.decode(response.responseText);
response.json = json;
el.update(this.tpl.apply(json), false, callback);
Ext.ux.TemplatePanel = Ext.extend(Ext.Panel, {
initComponent: function() {
if (Ext.type(this.tpl) === 'string') {
this.tpl = new Ext.Template(this.tpl);
this.tpl.disableFormats = true;
this.on("render", function(){
var um = this.body.getUpdater();
um.renderer = new Ext.ux.TemplateRenderer(this.tpl);
}, this, {single:true});
onRender: function(ct, position) {
Ext.ux.TemplatePanel.superclass.onRender.call(this, ct, position);
if (this.data) {
update: function(data) {
this.tpl.overwrite(this.body, data);
Ext.reg('templatepanel', Ext.ux.TemplatePanel);

and a small sample

var details = new Ext.ux.TemplatePanel({
id: 'detailInfo',
title: 'Details',
height: 150,
html: '<center>geen record geselecteeerd</center>',
tpl: '<div>{company}</div><div>{address}</div><div>{phone}</div>',

var details = Ext.getCmp('detailInfo');
url: <someurl>,
callback: function(el, success, response, options){