PDA

View Full Version : XTemplate beginner question



PCSpectra
5 Feb 2010, 7:52 AM
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:




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



Then I initialize the template and render it like so:




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).



["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:




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

aconran
5 Feb 2010, 10:53 AM
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.

PCSpectra
5 Feb 2010, 12:34 PM
Awesome. Thank you, I iwll try that immediately :)

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

Cheers,
Alex

KJedi
19 Jul 2010, 5:50 AM
Sorry, but this does not work for me.
I have this code:

var tpl = new Ext.XTemplate(
'<ul>',
'<tpl for=".">',
'<li>{.}</li>',
'</for>',
'</ul>'
)
tpl.overwrite(this.body, operations);

operations is an array like this:

["edit","delete","create","etc"]
Result is:

<li>edit,delete,create,etc
It simply joins array with comma and for some reason omits <ul>

Any ideas?

Animal
19 Jul 2010, 5:53 AM
Tag mismatch <tpl>...</for>

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

Paste this in:



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

KJedi
19 Jul 2010, 5:54 AM
Sorry, I found it... I misspelled in the template... <tpl> tag was not closed properly