Results 1 to 6 of 6

Thread: XTemplate beginner question

  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    127

    Default XTemplate beginner question

    OK so I have finally reached a point where I need some custom HTML in my extJS application, reading the docs and forums I managed to *almost* get something working:

    Code:
    var models = new Ext.XTemplate ( '<ul>', '<tpl for=".">', '<li>{0}</li>', '</tpl>', '</ul>' );
    Then I initialize the template and render it like so:

    Code:
    var
    
    result = Ext.decode(response.responseText);
    alert(models.apply(result.models)); return false;


    I need to first render a template that iterates an array and generates a UL list then assign that as a variable in a master template, that much I have figured out.

    result.models is a JSON/Array object (I am not sure TBH).

    Code:
    ["PW118", "PW118A", "PW120", "PW121", "PW121A", "PW123"]
    I just tried the above code in FireFox and it seems FireFox is returning somethig at least. It appears to be the first character in each element of the array:

    Code:
    var models = new Ext.XTemplate ( '<ul>', '<tpl for=".">', '<li>{0}{1}{2}</li>', '</tpl>', '</ul>' );


    This code (in FireFox in IE alert still generates HTML but without values) seems to give me the first 3 characters of any model in the array.

    What gives, what am I missing? Have I stumbled across a bug here in IE?

    Cheers,
    Alex


  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    The . operator in an XTemplate is able to access "flat" or "primitive" values.

    When used IN the tpl tag it means that you are going to get a direct array.

    When used within the tpl tag, it means access the primitive.

    Instead of using {0}{1}{2}, use {.} You are currently accessing the characters of the string directly.
    Aaron Conran
    @aconran

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Posts
    127

    Default

    Awesome. Thank you, I iwll try that immediately

    EDIT | Worked like a charm. Thanks again!!!

    Cheers,
    Alex
    Last edited by PCSpectra; 5 Feb 2010 at 12:35 PM. Reason: SOLVED

  4. #4
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145

    Default

    Sorry, but this does not work for me.
    I have this code:
    Code:
    var tpl = new Ext.XTemplate(
    	'<ul>',
    	'<tpl for=".">',
    		'<li>{.}</li>',
    	'</for>',
    	'</ul>'
    )
    tpl.overwrite(this.body, operations);
    operations is an array like this:
    Code:
    ["edit","delete","create","etc"]
    Result is:
    HTML Code:
    <li>edit,delete,create,etc
    It simply joins array with comma and for some reason omits <ul>

    Any ideas?

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Tag mismatch <tpl>...</for>

    Practice on the Firebug console command line using Xtemplate.apply()

    Paste this in:

    Code:
    new Ext.XTemplate('<ul><tpl for="."><li>{.}</li></tpl></ul>').apply(['foo','bar','bletch'])

  6. #6
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145

    Default

    Sorry, I found it... I misspelled in the template... <tpl> tag was not closed properly

Posting Permissions

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