PDA

View Full Version : help with template and image



el_crespo
11 Nov 2009, 12:45 PM
Hello, I have the next template:


<div id="part-preview-tpl" style="display:none;">
<div style="padding:'10px 10px 10px 10px'">
<h1>{title}</h1>
<img style="float:left" height="400" width="400" src= "{imageSrc}"/>
<h2>Title</h2>
<p>{title}</p>
<h2>Introduction of the part</h2>
<p>{introduction}</p>
</div>

and in the .js:


var Guide = {

title: title,
introduction:introduction
imageSrc: 'http://www.linternaute.com/sport/magazine/photo/8-experiences-sportives-insolites/image/tennis-heliport-381085.jpg',
id: id
};

previewTpl = Ext.Template.from('part-preview-tpl', {
compiled : true,
disableFormats: true
});

var html = previewTpl.apply(Guide);

panel.add({html:html}); //





the problem is that the src of image is not working, don't load the image (the rest all is ok).. what I'm doing wrong? can you help me?

Sorry, my english isn't good

Ash2009
11 Nov 2009, 1:18 PM
use firebug.
Check the url of the image ,if it actually exists there.next check if the html generated after applying the template points to correct url of the image.hovering over it shows the image in firebug.

el_crespo
11 Nov 2009, 2:10 PM
Thanks Ash2009 the fast answer, so.. I'm using firebug... the url of the image exists, I mean if I put it ({imageSrc}) in the id of the image the value of id is the url of the image.... but when I wanna put it in src, the value of the src is src="%7BimageSrc%7D" I don't know what is happening with that.. :S

carol.ext
11 Nov 2009, 2:38 PM
Is this just a copy-paste issue? There seems to be a comma missing after introduction :


var Guide = {

title: title,
introduction:introduction
imageSrc: 'http://www.linternaute.com/sport/magazine/photo/8-experiences-sportives-insolites/image/tennis-heliport-381085.jpg',
id: id
};

Ash2009
11 Nov 2009, 2:45 PM
I tried this based on Ext examples and it worked

var Guide = {

title: "sometitle",
introduction:"someintroduction",
imageSrc: 'http://www.linternaute.com/sport/magazine/photo/8-experiences-sportives-insolites/image/tennis-heliport-381085.jpg',
id: "someid"
};
var tpl = new Ext.XTemplate(
'<tpl>',
'<div id="part-preview-tpl" style="display:block;">',
'<div style="padding:10px 10px 10px 10px">',
'<h1>{title}</h1>',
'<img style="float:left" height="400" width="400" src= "{imageSrc}"/>',
'<h2>Title</h2>',
'<p>{title}</p>',
'<h2>Introduction of the part</h2>',
'<p>{introduction}</p>',
'</div></tpl>'
);

var p = new Ext.Panel({
title:'template',
renderTo:'document.body',
width:400,
height:400
});

tpl.overwrite(p.body,Guide);

el_crespo
12 Nov 2009, 6:08 AM
thanks for the help, I'll try do that