PDA

View Full Version : tpl.applyTemplate returns 'undefined' is not an object error



aswinramakrish
10 Nov 2011, 2:30 AM
I've just started playing around with Sencha Touch and I'm trying to apply a template from JSON, through an ajax call and I've been getting this error.

TypeError: 'undefined' is not an object (evaluating 'tpl.applyTemplate')

My JSON is just a regular one (Tested with JSON lint and it works fine).My success property of the ajax call looks something like this:



success: function (response) {
var data = Ext.util.JSON.decode(response.responseText);
console.log(data);
var html = tpl.applyTemplate(data);
console.log(html);
Ext.getCmp('dPanel').update(html);
}



Here is the template that I used:



var tpl = Ext.XTemplate(
'<tpl for=".">',
'<div class="field">',
'<div class="fieldHeader">Number: #{Id}</div>',
'<div class="fieldData">',
'<ul>',
'<li><b>Date:</b> {Date}</li>',
'<li><b>Contact @:</b> {Contact}</li>',
'<li><b>Type:</b> {Type}</li>',
'<li><b>Organization Info:</b> {Organization}</li>',
'</ul>',
'</div>',
'<div class="Text">',
'<hr>',
'<b>Description</b>',
'<p>{Description}</p>',
'</div>',
'</div>',
'</tpl>'
);


More Info: The console.log(data) shows a clean JSON. I also tried using Ext.decode and tpl.apply()though my template was an XTemplate. Still, no luck..
Any help would be highly appreciated!

mitchellsimoens
18 Nov 2011, 3:32 PM
You will need to Ext.decode the JSON string to make it actual JS code. This is working for me:


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="field">',
'<div class="fieldHeader">Number: #{Id}</div>',
'<div class="fieldData">',
'<ul>',
'<li><b>Date:</b> {Date}</li>',
'<li><b>Contact @:</b> {Contact}</li>',
'<li><b>Type:</b> {Type}</li>',
'<li><b>Organization Info:</b> {Organization}</li>',
'</ul>',
'</div>',
'<div class="Text">',
'<hr>',
'<b>Description</b>',
'<p>{Description}</p>',
'</div>',
'</div>',
'</tpl>'
);

//The following can be an Array of Objects or just an Object
var html = tpl.apply([{
Id : 10,
Date : '2011-11-18',
Contact : '111-111-1111',
Type : 'Phone',
Organization : 'Sencha Inc',
Description : 'Sencha Touch is freakin sweet!'
}]);

console.log(html);