View Full Version : xtemplate

3 Jun 2009, 1:48 PM
hi all,

1) i am trying to add a template in a tabpanel.

the .js that i wrote for template is as follows:

x.y.MessageTemplate = Ext.extend(Ext.Panel, {
initComponent : function() {
if (typeof this.tpl === 'string') {
this.tpl = new Ext.XTemplate(this.tpl);
this.tpl.overwrite(this, this.data);


I send the values for data and tpl from another .js where i instantiate the object.
however the above doesnt work and i am wondering the first parameter(this) in this.tpl.overwrite(this, this.data); has goto do something with it. (I want the template to load within the panel above.. i also tried.. this.items but came undefined.)

2) the data that i send from another .js has to be a json string from the server. how do i get this json string before hand, and send it while instantiating obj of the class above.

4 Jun 2009, 8:07 AM
You don't want to overwrite the Panel itself... How about overwriting the html configuration before you call your parentclass's initComponent method?

Take a look at this TemplatePanel user extension (http://extjs.com/forum/showthread.php?t=22386&highlight=templatepanel&p=106006) I put together a while back.

4 Jun 2009, 8:27 AM
hi aaron,

wat i am doing right now is.. in my main class where i define my east panel.. i instantiate mytemplate.js object ... and pass data.. the value of which i get dynamically via a conn.request()... data gets generated everytime a link is click.. event dependant.. and i have update() in mytemplate.js which gets fired when this event occurs and updates the data in the template i defined...

4 Jun 2009, 9:03 AM
Yup, so in your success handler of your Ajax request, you could execute the update method and pass it the additional data after you decoded it from JSON.

Something along the lines of...

success: function(response, opts) {
var o = Ext.decode(response.responseText);


4 Jun 2009, 2:03 PM
yup.. i do something like that..

so another question: so my eastpanel has tabpanel in it.. in the first tab i try to instantiate my mytemplate.js object which extends a panel in which i have my xtemplate instantiated..

so its like... eastpanel - made of tab panel - first tab - mytemplate(panel) - instantiates xtemplate..
when the message inside the eastpanel loads.. it doesnt show up scroll bar.when the text is large enuf.. now i have put autoscroll: true in tab panel declaration and also in the first tab declaration..

scroll still doesnt show up..


4 Jun 2009, 6:52 PM
You should set autoScroll on the 1st tab of mytemplate. Notice the case