Results 1 to 6 of 6

Thread: help with template and image

  1. #1

    Question help with template and image

    Hello, I have the next template:

    HTML Code:
    <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:

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    88

    Default

    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.

  3. #3

    Default

    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

  4. #4
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    707

    Default

    Is this just a copy-paste issue? There seems to be a comma missing after introduction :

    Code:
    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
                                };

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    88

    Default

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

  6. #6

    Default

    thanks for the help, I'll try do that

Posting Permissions

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