Tree, Afficher un tooltip dynamique (request JSON) ?

Version imprimable

04/07/2014, 20h40
Bruno13

Tree, Afficher un tooltip dynamique (request JSON) ?

Salut tout le monde,
(MVC + ExtJS4 + Tree)

J'ai actuellement un Treegrid dans lequel je voudrais afficher pour certains noeuds, un tooltip.
Je sais qu'il suffit en statique d'ajouter à mon Store, un qtip.

Mais moi, je voudrais afficher des infos que je vais chercher dans une BdD via une requête Ext.Ajax.request.

Est-ce qu'une âme charitable aurait un petit bout de code pour me montrer ce que je pourrais mettre dans le itemmouseenter (ou un autre) du listener.
Et comment affecter bien sûr à qtip les infos recueillis?

D'avance merci pour votre aide,

PS: je continue à chercher de mon côté....

Trouvé !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
	this.tip = Ext.create('Ext.tip.ToolTip', {
		target: view.el,          // The overall target element.
		delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.
		trackMouse: true,         // Moving within the row should not hide the tip.
		renderTo: Ext.getBody(),  // Render immediately so that tip.body can be referenced prior to the first show.
		listeners: {              // Change content dynamically depending on which element triggered the show.
			beforeshow: function updateTipBody(tip) {
				tip.update('My Variable Text Here');
			}
		}
	});
},

Bon, je me suis un peu emporté, hélas cela ne fonctionne pas si je veux mettre à l'intérieur une requête AJAX pour récupérer les données correspondantes au nœud.

Ceci ne fonctionne pas :

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
itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
	// http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tip.ToolTip
	this.tip = Ext.create('Ext.tip.ToolTip', {
		target      : view.el,              // The overall target element.
		delegate    : view.itemSelector,    // Each grid row causes its own seperate show and hide.
		trackMouse  : true,                 // Moving within the row should not hide the tip.
		renderTo    : Ext.getBody(),        // Render immediately so that tip.body can be referenced prior to the first show.
		//showDelay   : 2000,
		listeners: {                        // Change content dynamically depending on which element triggered the show.
			beforeshow: function updateTipBody(tip) {
				tip.update('Please wait...');
				Ext.Ajax.request({
					url         : 'data/item/read.php',
					method      : 'POST',
					params: {
						cid     : PatentPulse.profileUser.get('cid'),
						lid     : PatentPulse.profileUser.get('id'),
						json_id : record.get('id')
					},
					success : function(response){
						// convert text response to javascript object
						var res = Ext.JSON.decode(response.responseText);
 
						// if server response contains "success" node, then success!        
						if ((res.success === true) && (res.total>0)) 
						{   
							tip.update(res.data[0]["item"]);
						} else
						{
 
						}
					},
					failure : function(response){
 
					}
				});    
			}
		}
	});
}

Premièrement, j'ai ma requête AJAX qui est exécutée plusieurs fois au lieu d'une unique fois lorsque je rentre sur un nœud.

Deuxièmement, je ne pense pas que je doive définir ma fonction autant de fois non ?

Un peu d'aide serait la bienvenue. :)

De mon côté, je cherche une autre solution... ou une meilleure adaptation. :'(

05/07/2014, 11h28
sekaijin

il y a un truc contradictoire dans ce que tu veux faire.

lorsque l'utilisateur va passé sa souris sur un noeud tu va envoyer une requête ajax
puis l'utilisateur pas se déplacer et probablement passer sur un autre noeud
tu va envoyer une autre requête ajax.
l'utilisateur va encore avoir le temps de faire autre chose comme quitter le panel

puis à un moment donnée on sais pas quand la première réponse ajax va arrivé et le qtip va s'afficher sur le premier neud

et pareil pour les appel suivant.

ne craints tu pas que ça fasse n'importe quoi du point de vu du client ??

un quick tip par définition doit être quick et s'afficher immédiatement ce n'est pas fait pour collecter de l'info mais notifier rapidement l'utilisateur sur l'objet.

je pense qu'utiliser un qtip pour ça est une mauvaise approche en terme d'usage. même si techniquement c'est réalisable, le rendu utilisateur ne pourra qu'être au mieux médiocre.

dans un arbre on vise rarement le noeud que l'on veut du premier coup
l'utilisateur vas en survoler une petite dizaine et tout d'un coup alors qu'il sera sur celui qui l'interesse tous les autres vont se mettre à afficher des qtip.

A+JYT
05/07/2014, 11h47
Bruno13

Bonjour Sekaijin,

Effectivement je commence à penser comme toi.

Je vais chercher une solution complétement différente et laisser tomber cette méthode pour l'instant.

Sur ce bon Week end :))