Results 1 to 2 of 2

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

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2011
    Location
    Denver, CO
    Posts
    15

    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

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
  •