Image dans un template

Version imprimable

26/06/2013, 00h03
abraxis

Image dans un template
Bonsoir,

J'ai un htmlEditor qui me permet d'insérer des images.
Je rajoute aussi du texte avant et/ou après mes images.
J'enregistre le tout dans une base de données.

Mon problème est quand je veux afficher ces données dans un XTemplate.
voila ce qui est affiché dans le template :

Citation:

du texte ici
<img style="width: 128px; height: 128px; float: left;" src="http://projet/data/uploads/th_txu.jpg">
encore du texte ici

Je n'est pas l'image mais la balise de l'image...
Voici mon template :
Code:

1 2 3 tpl: Ext.create('Ext.XTemplate', '<div>{content}</div>' )
Je ne peu donc pas mettre dans mon template les balises images car je ne sais pas combien je vais avoir d'image ni même la quantité de texte avant et après.

Comment puis-je faire pour afficher mes images plutôt que d'afficher la balise image ?

Merci par avance
04/07/2013, 22h51
abraxis

Pas de réponse ?
Je suppose donc que je suis le seul dans ce cas...

Je vais continuer de chercher et je finirais bien par trouver une solution : )
08/07/2013, 11h29
sekaijin

tu n'est pas le seul à utiliser un template
mais tu ne dis pas ce qu'il y a dans tes variables

un template est un truc bête qui est fait pour afficher des données
donc il affiche le contenu de tes variables

ce que tu as mis dedans comment tu l'y a mis etc ????

A+JYT
08/07/2013, 12h05
abraxis
Dans mon premier post je donne le texte qui est contenu dans ma variable.
Code:

1 2 3 du texte ici <img style="width: 128px; height: 128px; float: left;" src="http://projet/data/uploads/th_txu.jpg"> encore du texte ici
Je récupère mes données via JSON qui a le format suviant :

Code:

{"success":true, "totalCount":3, "result":[{"content": "du texte ici<br><img style='width: 128px; height: 128px; float: left;' src='http://projet/data/uploads/th_txu.jpg'><br>encore du texte ici", "id": 2}]}

Mon JSON est créé en PHP comme ceci :
Code:

1 2 3 4 5 6 $response = Array( "success" => true, "totalCount" => count($arrAll), "result" => $arrAll ); echo json_encode($response);

un template est fait pour afficher des données et c'est bien ce que fait ton exemple
tu demande à sencha d'afficher
Code:

1 2 3 du texte ici <img style="width: 128px; height: 128px; float: left;" src="http://projet/data/uploads/th_txu.jpg"> encore du texte ici
et c'est bien ce qui est affiché;

Xtemplate offre quelques option supplémentaires. je ne suis pas sur mais tu peux peut-être essayer de désactiver le formatage des données
Code:

1 2 3 4 5 6 7 8 9 var t = new Ext.XTemplate( '<div name="{id}">', '<span class="{cls}">{name} {value}</span>', '</div>', // a configuration object: { disableFormats: true } );
en fait le systeme de template formate les données (date number etc.) pour html les variablee sont parsés et changé avec des htmlentities.

en fait ce que tu cherche à faire ne relève pas d'un template mais d'un simple html

je pense que ce que tu cherche à faire relève plus de http://docs.sencha.com/extjs/4.1.3/#...hod-insertHtml

A+JYT

08/07/2013, 14h47
abraxis

Merci pour cette réponse.

Je vais essayer cette solution ce soir et je vous informerais de l'avancement.

Après plusieurs tests (dans tous les sens) je n'arrive toujours à afficher les images...

insertHtml() me donne le même resultat que mon XTemplate de base.

Je n'avais peu-être pas donné assez de détail sur mon fonctionnement.

J'ai mon objet XTemplate dans une page.
Dans une autre page j'appel mon XTemplate dans une boucle.
donc impossible de mettre un ID dans mon template.

Je vais mettre mon code entier ici pour vous donner une idée.

Mon XTemplate :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Ext.define('Projet.view.TemplateContent', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.templateContent',
    border: false,
    autoScroll: true,
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            tpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                '<fieldset class="fieldsetTpl">',
                '<legend class="line1">Par <span class="author">{login}</span> le <span class="date">{dateCreat:this.formatDate}</span></legend>',
                '<div class="line2">{title}</div>',
                '<div class="contentTicket">',
                    '<div class="content">' + /* Ici doit venir s'afficher mes texte et mes images */ + '</div>',
                '</div></fieldset>',
                '</tpl>',
                {
                    formatDate: function(val) {
                        return Ext.Date.format(val, 'j/M/Y H:i:s');
                    }
                }
            )
        });
        me.callParent(arguments);
    }
});

L'appel de mon XTemplate :

Code:

1
2
3
4
5
6
7
8
9
 Ext.each(rec, function(rec) {
    Ext.getCmp('panelCenter').add({
        xtype: 'templateContent',
        data: rec.data,
        active: rec
    });
    //var dh = Ext.DomHelper;
    //dh.insertHtml('afterEnd',  ????????, rec.data.content);
}, this);

Si vous avez une idée je veux bien un coup de patte car la je ne vois plus comment faire ....

Merci par avance

19/08/2013, 13h31
abraxis

J'ai enfin trouvé la solution....
A la place de {content} qui contient mon texte et mes images, j'ai rajouté {content:htmlDecode} pour autoriser la prise en charge des balises img.