PDA

View Full Version : Dynamic Tooltip with Ajax (ext:qurl)



matei
22 Oct 2010, 10:06 AM
I tried to find some examples with QuickTip that are loaded with Ajax and couldn't find, so I made my self this posibility that I want to share...

the quick/short fix is :



Ext.QuickTip.prototype.tagConfig.url = 'qurl';
Ext.override(Ext.QuickTip, {
// private
urlBodyUpdate: function(t){
var u, url, et = Ext.fly(t.el), cfg = this.tagConfig, ns = cfg.namespace;
url = et.getAttribute(cfg.url, ns);
if(url){
u = this.body.getUpdater();
u.update({
scope: this,
url: url,
callback: function(el, success, response, options){
if(success && (et = Ext.fly(t.el))){
// found the element again, is changed when move fast through elements
var o = {};
o[ns+':'+cfg.attribute] = response.responseText; // set
o[ns+':'+cfg.url] = ''; // remove qurl to not be loaded many times
et.set(o);
if(!t.width){
this.doAutoWidth();
}
}
}
});
}
},

showAt: Ext.QuickTip.prototype.showAt.createSequence(function(xy){
var t = this.activeTarget;
if(t){
this.urlBodyUpdate(t);
}
})
});


Will be a good solution to be included in new versions of ext, if will be, made also some improvements:



onTargetOver : function(e){
if(this.disabled){
return;
}
this.targetXY = e.getXY();
var t = e.getTarget();
if(!t || t.nodeType !== 1 || t == document || t == document.body){
return;
}
if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
this.clearTimer('hide');
this.show();
return;
}
if(t && this.targets[t.id]){
this.activeTarget = this.targets[t.id];
this.activeTarget.el = t;
this.anchor = this.activeTarget.anchor;
if(this.anchor){
this.anchorTarget = t;
}
this.delayShow();
return;
}
var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
if(ttp = this.getTipCfg(e)){
var autoHide = et.getAttribute(cfg.hide, ns);
this.activeTarget = {
el: t,
text: ttp,
width: et.getAttribute(cfg.width, ns),
autoHide: autoHide != "user" && autoHide !== 'false',
title: et.getAttribute(cfg.title, ns),
cls: et.getAttribute(cfg.cls, ns),
align: et.getAttribute(cfg.align, ns),
url: et.getAttribute(cfg.url, ns) // new attribute
};
this.anchor = et.getAttribute(cfg.anchor, ns);
if(this.anchor){
this.anchorTarget = t;
}
this.delayShow();
}
},

urlBodyUpdate: function(t){
var u, url = t.url;
if(url){
u = this.body.getUpdater();
u.update({
scope: this,
url: url,
callback: function(el, success, response, options){
if(success){
var o = {}, et = Ext.fly(t.el), cfg = this.tagConfig, ns = cfg.namespace;
if(et){
o[ns+':'+cfg.attribute] = response.responseText;
o[ns+':'+cfg.url] = ''; // remove qurl to not be loaded many times
et.set(o);
if(!t.width){
this.doAutoWidth();
}
}
}
}
});
}
}


HTML Usage:


<span ext:qurl="servlets/verse.php?id=23243" ext:qtip=" " ext:qwidth="200">Mat 5.8</span>

I used ext:qtip=" " (blank because initial must show something, if not specified will be no tooltip)

Response will be:

<b>Matthew 5:8</b><br/>Blessed are the pure in heart, for they shall see God.

bold - to simulate title tooltip.

Hope is useful for others.

Live example
(press on seccond button in grid tbar (RO: Trimiteri, EN: References), then you will see many links in the grid, they all have dynamic qtips:
http://app.bibliaonline.ro/#b1=40-5

prophet
23 Oct 2010, 8:05 AM
This is a great addition! Worked perfectly for me.
Thank you for posting this!

jmaia
12 Jan 2012, 3:11 AM
Hi,

Is there an Ext JS 4 version of this extension ?

Joao Maia

matei
12 Jan 2012, 3:14 AM
not done yet. I'll try to migrate my app to ext4 and then I'll need to make it work also in ext4

jmaia
12 Jan 2012, 3:15 AM
:(