tpl.applyTemplate returns 'undefined' is not an object error

[aswinramakrish]

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]

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);