PDA

View Full Version : XTemplate conditionals & array index



Hertz
10 Feb 2011, 3:38 PM
I have the following HTML structure inside of an XTemplate:



<div class="container">
<div class="float-left"><img></div> <!-- Odd -->
<div class="float-right"><img></div> <!-- Even -->
</div>


What i need to do is loop through each of the values of a model, and for each odd number, create this structure in order to create pairs.

I've tried to call a member function which checks if the xindex is odd or not, but i think the problem is that i cannot use {[xindex]} inside of something like this: '<tpl if="this.isOdd({[xindex]})">'

So i have two questions, how can I pass in the xindex to a function OR how can i force xindex into its next value.

Or maybe there's another way for doing this.
Any help appreciated :)

gmenuet
11 Feb 2011, 6:52 AM
I think <tpl if="this.isOdd(xindex)"> should work. You should use {[xindex]} only when you're out of <tpl>

Hertz
11 Feb 2011, 7:19 AM
Thanks a lot gmenuet, it works, yesterday i was reading a post where it was mentioned that we cannot use {[...]} inside of <tpl> tags, silly me for not trying it without them before though.

Now i only need to find if it is possible to force xindex into its next value.

khalabieh
12 Dec 2011, 12:59 AM
hello guys... I'm stuck in somehow the same problem. In my code, I divided my <div>'s into figures( that are images with there caption). My aim is to have 6 figures on the same row. I am not knowing how to pass the function to make them next to each other. my code is this:
Ext.setup({
onReady: function () {
var content, picInfo, picture1, picture2, picture3, picture4, picture5, pictures;


picInfo = new Ext.XTemplate(
// '<ul id="planetList">',
'<tpl for=".">',
// '<li class="odd">',
'<div class= "green">',
'<tpl if="image.length === 0">',
'</br>',
'<img src="images/no_image.jpg"/>({#})',
'<br/>',
'</tpl>',
'<tpl if="image.length &gt; 0">',
'<h2>{image}({#})</h2>',
'</tpl>',
'<tpl if="figcaption.length === 0">',
'no caption available',
'</tpl>',
'<tpl if="figcaption.length &gt; 0">',
'{figcaption}',
'</tpl>',
'</div>',
// '<li>',


'</tpl>'
// '</ul>'
);


content = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: picInfo
});


picture1 = { image: '<img src="images/pic_1.jpg"/>', figcaption: "Cabinet to hold 2 sessions this week,STL funding off agenda." };
picture2 = { image: '<img src="images/pic_2.jpg"/>', figcaption: "Hariri Congratulates Jabr on Beirut Bar Association win." };
picture3 = { image: "", figcaption: "Sleiman relterates commitment to tribunal." };
picture4 = { image: '<img src="images/pic_4.jpg"/>', figcaption: "Jabr wins Beirut Bar Association." };
picture5 = { image: '<img src="images/pic_5.jpg"/>', figcaption: "" };
picture6 = { image: "", figcaption: "" };
pictures = [picture1, picture2, picture3, picture4, picture5, picture6];
content.update(pictures);
}
});