Results 1 to 2 of 2

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

  1. #1
    Sencha Premium Member aswinramakrish's Avatar
    Join Date
    Aug 2011
    Location
    Denver, CO
    Posts
    15
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,416
    Vote Rating
    1269
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •