Discussion :

[Bruno13]

Bonjour à tous,

j'ai une grille avec un TemplateColumn. Cette colonne utilise un XTemplate dans laquelle je définis une div comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
                    tpl         : new Ext.XTemplate(
...
                        '  <div id="img{name}"></div>',
...

J'ai gérer l’événement AfterRender de la colonne dans mon contrôleur comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    onAfterRenderConfigPicture: function() {
        var myinfgrid = this.getRefinfpatentgrid();
 
        for (j=1; j<=myinfgrid.store.data.length; j++) {
            var data = myinfgrid.store.data.map[j].value;
 
            for (i=0; i<data.length; i++) {
                console.log(Ext.fly('img' + data[i].data['name']));
            }
 
        }
    },

c'est une infiniteGrid avec certaines options au niveau du buffer. bref...

Je parcours donc mes datas pour reconstruire mon ID de ma div.

Hélas, que je fasse:
- getCmp
- get
- fly

Aucun ne me trouve ma DIV , je précise que j'ai bien les name dans le AfterRender donc l'identifiant est bien reconstruit

Est-ce que je m'y prend mal, ou alors au mauvais endroit ?

D'avance merci pour vos conseils,
Bruno

[sekaijin]

Il y a un get qui retourne l'élément html
Je suir mon tel donc ....
Mais getcmp retourne l'id du composant et lautre l'id de l'élément.

[Bruno13]

oui mais là le problème c'est que quelque soit la méthode utilisée j'ai null ou undefined comme retour !
on dirait que alors que je suis dans le afterrender de la colonne, l’élément n'existe pas encore

j'avais lu quelques part sur un XTemplate il était très compliqué de trouver un élément via son id ou sa class,
un pseudo bug ou un truc de ce genre. C'est dommage je retrouve plus le lien

[Bruno13]

Je reviens à la charge sur ce problème qui me pourri la vie depuis plusieurs jours, j'essaie de faire plus simple dans mes explications car mon code a un peu changé

j'ai une Grid qui utilise un XTemplate
j'ai dans mon xtemplate un <span id="idinfcpc">...</span>

Et bien impossible de récupérer ce id avec un Ext.get("idinfcpc");

j'ai toujours null

j'ai essayé de mettre le Ext.get dans les events de la grid:
- afterrender
- render
- viewready
- boxready

hélas sans succès....

si quelqu'un peut m'aider ça serait vraiment top, j'ai perdu énormément de temps....et je n'ai plus d'idée hélas...

D'avance merci,
Bruno

[sekaijin]

je ne comprends pas si tu utilise un xtemplate dans un grid je conclus que ton xtemplate est utilisé plusieurs fois
chaque utilisations du template génère un DOM ce dom est spécifique.
donc si tu mets un id en dur dans le xtemplate le DOM généré ne peux avoir cet id.
car sinon toutes les instances du DOM généré aurait le même id ce qui est interdit.

Je ne comprends quel est le besoin.
si le besoin est de mettre du contenu html avec une image dans la cellule cet un renderer qui te faut utiliser.

Si le besoin est de gérer un événement sur le contenu de la cellule il suffit d'attacher l'événement à la cellule.

bref je ne comprends pas ce que tu fais.
A+JYT

[Bruno13]

je vais essayer d'être plus précis dans mes explications.

j'ai des brevets dans une base, chaque brevet possède plusieurs champs (numéro, date, titre, déposant, inventeur, code, image, ...)
je me sers d'une grille pour afficher chaque brevet.
Grâce à un XTemplate, j'affiche un brevet par ligne (donc une unique colonne)

Ce que je cherche à faire c'est sur le hover de chaque code je voudrais
aller chercher sa définition dans une autre base mais cela après 2 secondes d'immobilité de la souris sur le code.
(un code par exemple A63C10/106 )

Sur une autre application je fais cela dans un container qui se sert d'un XTemplate et cela fonctionne (effectivement là ce n'est pas une grid et donc je n'ai qu'un seul enregistrement)
( au moment où j'écris je crois que je commence à comprendre, il y a des ID portant le même nom pour chaque ligne de ma grille ?! est-ce déjà un problème ça ?)

ci-dessous, je mets le code que j'utilise dans mon autre appli:
je précise que ce code fonctionne parfaitement

Ici le container n'affiche qu'un unique brevet
Dans le XTemplate que j'affiche dans le container:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
            '           <tpl if="cpc.length &gt; 0">',
            '           <b>CPC:</b><span id="idcpc">&nbsp;',
            '               <tpl for="cpc">',
            '                   <span id="cpc_{.}" class="helponline_cpc"><tpl if="xindex==xcount">{.}<tpl else>{.},&nbsp;</tpl></span>',
            '               </tpl></span><br><br>',
            '           </tpl>',

le code dans le controler:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    refreshBiblioSheet: function(aRecord) {
...
...
        var el = Ext.get("mybibliosheet");                        
        myAPP.util.Templates.TplBiblioSmooth.overwrite(el, aRecord.data);
...
...
        // CODE CPC
        var parent  = Ext.get("idcpc");
        if (parent) {
            var elems   = parent.select("span.helponline_cpc").elements;        
            Ext.each(elems, function(elem) {
                var myCode = elem.id.substr(4, elem.id.length);
                Ext.create('Ext.tip.ToolTip', {
                    // The overall target element.
                    target      : elem,
                    // Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set dismissDelay = 0.
                    dismissDelay    : 0,
                    // Render immediately so that tip.body can be referenced prior to the first show.
                    renderTo    : Ext.getBody(),
                    title       : 'CPC Definition: ' + myCode,
                    listeners   : {
                        // Change content dynamically depending on which element triggered the show.
                        beforeshow: function updateTipBody(tip) {
                            tip.update('Please wait, Loading...');
                            var task = new Ext.util.DelayedTask(function() {
                                // Make you ajax call here and update the tooltip in its callback method
                                Ext.Ajax.request({
                                    url     : 'xxxxx.php',
                                    method  : 'post',
                                    params  : {
                                        code    : myCode
                                    },
                                    success: function (data) {
                                        if (!Ext.isEmpty(data.responseText)) {
                                            var res = Ext.JSON.decode(data.responseText);
                                            tip.update(res.data);
                                        } else {
                                            tip.update('Definition not available for this CPC code');
                                        }
                                    },
                                    failure: function (data) {
                                        // Opérations en cas d'échec de la requête
                                        tip.update('Error: Definition not available for this CPC code');
                                    }
                                });
 
                            });
                            task.delay(2000);
 
                        }
                    }
                });        
            });
        }    
        /* FIN DES DECLARATION HELP ONLINE HINT                               */
...
...
}

Je voudrais donc faire la même chose mais pour une grille.

Petite particularité, j'ai pour ma grille, différents formats d'affichage,
je charge donc suivant le choix de l'utilisateur (bouton radio) le XTemplate qui correspond à son choix dynamiquement.
voilà pourquoi je n'ai pas choisi un simple renderer sur la colonne.