1. #1
    Sencha User aswinramakrish's Avatar
    Join Date
    Aug 2011
    Location
    Denver, CO
    Posts
    14
    Vote Rating
    1
    aswinramakrish is on a distinguished road

      0  

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

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


    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:


    Code:
    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:


    Code:
    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!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You will need to Ext.decode the JSON string to make it actual JS code. This is working for me:

    Code:
    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);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.