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,556
    Vote Rating
    1272
      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! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

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
  •