View Full Version : XTemplate

9 Dec 2011, 5:32 AM
I am doing a small app that reads a picture with a caption. I want to do it using XTemplate. I got the images with there caption below it. I want to give them a specific css so that they can get next to each other( I want to have each three images on the same row). I am not knowing how to give what I've done so far some styling

onReady: function () {
var content, picInfo, picture1, picture2, picture3, picture4, picture5, pictures;

picInfo = new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="image.length === 0">',
'<img src="images/no_image.jpg"/>({#})',
'<tpl if="image.length &gt; 0">',
'<tpl if="figcaption.length === 0">',
'no caption available',
'<tpl if="figcaption.length &gt; 0">',


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];

Thank you

9 Dec 2011, 11:10 AM
So you want to have 3 images per row? Use float: left to get them aside of each other.

9 Dec 2011, 11:19 AM
I have already done the necessary styling for each picture, but the problem is that I am not knowing how to apply this styling to the code I have above. How can I access the photos and give a styling to each one.Thank you

9 Dec 2011, 11:22 AM
Don't pass in the <img>, just the path to the image. In your xtemplate, build the <img> tag and therefore you can now apply the class/style attribute to what you want.

10 Dec 2011, 1:43 AM
I'm sorry but I didn't quite understand what you suggested.
I was thinking about making my figures( images and captions) as list items and giving a style to each item according to its position ( if its the first, second, or third image). I tried viewing the tutorial, but its not working. I think there is something missing in it.
Thank you for your help

10 Dec 2011, 6:48 AM
This part of your XTemplate where you are putting the {image} in:

'<tpl if="image.length &gt; 0">',

You could do this:

'<tpl if="image.length &gt; 0">',
'<h2><img src="{image}">({#})</h2>',

And then your data you pass in could be like this:

picture1 = { image: 'images/pic_1.jpg', figcaption: "Cabinet to hold 2 sessions this week,STL funding off agenda." };

Now in your XTemplate, you have access to the <img> tag.