[EXTJS 4.2.5] Grid, XTemplate, trouver une div id ?

Version imprimable

Bonjour à tous,

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

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:

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

10/11/2016, 08h19
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.
10/11/2016, 09h04
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
18/11/2016, 17h40
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 ...

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
19/11/2016, 17h05
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

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:

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:

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.

Dans l'exemple que tu présente tu utilise un template pour produire Un affichage et donc tu peux mettre l'id dans le template pour le récupérer ensuite.

pour une grid utilise un renderer pour ta cellule

ensuite tu gère l'événement de survol sur la cellule
ainsi tu as accès à tout son contenu tu peux donc récupérer l'élément survolé avec l'événement e.getTarget() et en fonction de sa nature réagir.

tu peux aussi construire un template qui contient son propre listener

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var resultTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="search-item">',
            '<a id={[this.getLinkId()]} href="violation.aspx?violationid={slvha}">',
                '<img src="images/icons/home.gif" style="float:left;padding-right:2px">{number}&nbsp;{street}',
            '</a>',
            '<p>Owners:&nbsp;{owners}',
            '<br/>Flag Code:&nbsp;{flag}',
            '<br/>Number of Violations:&nbsp;[{summary}]</p>',
        '</div>',
    '</tpl>', {
    getLinkId: function(values) {
        var result = Ext.id(); //ICI génération d'un ID tu peux utiliser des paramètres de ton template
        this.addListener.defer(1, this, [result]);
        return result;
    },
    addListener: function(id) {
        Ext.get(id).on('click', function(e){e.stopEvent(); alert('link ' + id + ' clicked');})
    }
});

A+JYT

20/11/2016, 14h53
Bruno13

j'ai un petit problème avec cette ligne d'explication:

Citation:

ensuite tu gères l'événement de survol sur la cellule
ainsi tu as accès à tout son contenu tu peux donc récupérer l'élément survolé avec l'événement e.getTarget() et en fonction de sa nature réagir.

Ma cellule contient plusieurs infos, il y a un titre, des noms de déposants, des codes, etc...
Si je gère le itemmousenter (pas trouvé de mouseover),

j'ai :
onGridItemMouseEnter: function(me, record, item, index, e, eOpts) {

le e.getTarget() ne s'active qu'une unique fois dans la cellule, au moment où la souris entre dans la cellule ET survol un element,
e.getTarget renvoie le premier element qu'il rencontre dans la cellule, ça peut être le titre, le numéro, ... bref
cela ne va pas.

Comment puis-je alors avoir à l'interieur de cette même cellule, l'element que je survole ?
tu vois ce que je veux dire ?

Je pense que le mieux des de définir un renderer qui utilise un template intégrant sont listener
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 renderer: function(value, metaData, record, ){ var resultTpl = new Ext.XTemplate( ' <tpl if="cpc.length > 0">', ' CPC: ', ' <tpl for="cpc">', ' <tpl if="xindex==xcount">{.}<tpl else>{.}, </tpl>', ' </tpl> ', ' </tpl>', { getSpamId: function(values) { var result = 'cpc_'+record.Id; this.addListener.defer(1, this, [result]); return result; }, addListener: function(id) { Ext.get(id).on('mouseover', function(e){.....;)}) } }); }
autre approche une colonne contient un composant (xtype) tu peux t'inspirer du actioncolumn http://docs.sencha.com/extjs/4.2.2/s...-column-Action pour créer ton propre composant

j'avoue que j'évite toujours de créer un dom via du html ou des template je passe toujours par l'API DOM créant des objet et pas du texte j'ai toujours accès à mes objets. c'est verbeux mais ça évite ce genre de galères.

A+JYT

21/11/2016, 00h23
Bruno13

j'avoue que ton explication et ton code avec un renderer me tente bien, juste que j'ai plusieurs config pour ma grille (une vue compact, une vue expanded, une vue picture) que l'utilisateur
choisi grâce à un Radio Bouton... ce qui voudrais dire ici que je dois modifier en profondeur mon code qui est déjà en prod'.... de plus chaque vue est assez longue, ce qui veut dire que le code dans mon renderer sera super long avec des conditions...

je vais voir si je peux pas faire un mix avec ta méthode et celle qui est en place...

en tout cas merci bcp pour le temps que tu passes à m'aider ! c'est très appréciable ! merci !

juste un dernier petit coup de pouce, j'ai une erreur dans mon XTemplate

pour le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
                            getSpamId: function(values) {
                                // generate un id unique
                                // ext-gen1628_cpc_A63C10/28
                                var result = Ext.id()+'_cpc_'+values; 
                                this.addListener.defer(1, this, [result]);
                                return result;
                            },
                            addListener: function(id) {
                                Ext.get(id).on('mouseover', function(e){
                                    e.stopEvent(); 
                                    alert('mouseover ' + id);
                                });
                            },

c'est la ligne
this.addListener.defer(1, this, [result]);

mais bon l'erreur est pas parlante!

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)

tu aurais une piste ?

bon voilà comment j'ai pu résoudre mon problème.

J'ai nommé mon l'id de ma colonne qui accueil le XTemplate id:"configcolumn"

dans le Controler j'ai récupéré l'évènement AfterRender de cette colonne

Code:

1
2
3
            '#configcolumn': {
                afterrender : this.onConfigPictureAfterRender
            }

Dans mon Xtemplate, j'affecte un id unique à chaque code de cette manière:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
...
                        '    <b>CPC:</b>&nbsp;',
                        '    <tpl for="cpc">',
                        '     <span id="{.:this.generateUnikCpcId()}" class="helponline_infcpc"><tpl if="xindex==xcount">{.}<tpl else>{.},&nbsp;</tpl></span>',
                        '    </tpl><br>',
...
                      },
                            generateUnikCpcId: function(values) {
                                // generate un id unique
                                // ext-gen1628_cpc_A63C10/28
                                var result = Ext.id()+'_cpc_'+values; 
                                return result;
                            },

et dans le controler

Code:

1
2
3
4
5
6
7
8
9
    onConfigPictureAfterRender: function() {
        var myGrid = this.getRefinfpatentgrid();
        myGrid.getEl().on('mouseover', this.onMouseOverCPC, null, {delegate: 'span.helponline_infcpc'});
    },
...
...
    onMouseOverCPC: function() {
        console.log('dedans');
    },

je vais voir maintenant comment je peux récupérer le id, mais bon je suppose que cela ne doit pas être compliqué, enfin j'espère....

suite au prochain épisode :)

Voilà la suite et FIN :

Code:

1
2
3
4
5
onMouseOverCPC: function(view, elem) {
        // 16 parce que ext-gen1628_cpc_
        var myCode = elem.id.substr(16, elem.id.length);
        console.log(myCode);
},

Et bien non, ce n'est pas fini....la misère...

si mon code est le suivant:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
    onMouseOverCPC: function(view, elem) {
        // 16 parce que ext-gen1628_cpc_
        var myCode = elem.id.substr(16, elem.id.length);
 
 
        console.log(myCode);
 
        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     : 'getCPC.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);
                }
            }
        });        
    },

Et bien cela ne fonctionne qu'au deuxième passage sur le code !!!
pourtant le console.log(myCode) s'affiche bien à chaque passage, y compris au tout premier.

Une idée ?

21/11/2016, 20h29
Bruno13

Voici une réponse d'une personne qui a je pense le même problème que moi:

Citation:

You encounter this problem, because you are creating the Ext.ToolTip when hovering the mouse over the element. It then get's displayed on your next mouseover event.

Ext.ToolTip is bound to a target element and shows automatically when you hover that element. You must create the tooltip before you hover the element, and it will show when necessary. Since you cannot attach the tooltip to an element before it is rendered, a good place to define the tooltip is at the render event of the Ext.Component that contains the element with the tooltip.