PDA

View Full Version : Ext.ux.AnchorToolTip - tool tip with anchor img cls and a new Ext.form.MessageTargets



RomAnoX
16 Jul 2009, 5:00 PM
I didn't find anything on the forums about it, a wanted an anchor tool tip to be in a textfield validation with autohide false, and i wanted the posibility to change the img of the anchor element on the tool tip, so i did this little extension and add a new Ext.form.MessageTargets that use this new tooltip for validation.



/**
* Ext.ux.AnchorToolTip - Tooltip that supports anchorStyle (CSS Class)
*
* @author Ing. Ulises Acosta
* @version Ext.ux.AnchorToolTip.js 1.0 2009-07-16 16:15
*
* @class Ext.ux.AnchorToolTip
* @extends Ext.ToolTip
*/

Ext.ns('Ext.ux');
Ext.ux.AnchorToolTip = Ext.extend(Ext.ToolTip, {
/**
* @cfg {String} anchorImgCls Class of the image of the anchor image (defaults to '')
* To use it you have to write css rule like this one
*
* .custom-anchor-img-class {
* background-image : url(custom-anchor-img-sprite.gif);
* }
*/
anchorImgCls: '',

// private
initComponent: function(){
Ext.ux.AnchorToolTip.superclass.initComponent.call(this);
},

// private
onRender : function(ct, position){
Ext.ToolTip.superclass.onRender.call(this, ct, position);
this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
this.anchorEl = this.el.createChild({
cls: 'x-tip-anchor' + ((this.anchorImgCls == '') ? '' : ' ' + this.anchorImgCls) + ' ' + this.anchorCls
});
},

/**
* Removes this ToolTip from the target element if exists.
*/
removeTarget : function(){
if(this.target){
this.target.un('mouseover', this.onTargetOver, this);
this.target.un('mouseout', this.onTargetOut, this);
this.target.un('mousemove', this.onMouseMove, this);
}
}

});

/**
* Extends Ext.form.MessageTargets to have an AnchorToolTip
* for validation porpuses with the style x-form-anchor-invalid
*/

Ext.apply( Ext.form.MessageTargets, {
'tooltip' : {
mark : function(field, msg){
field.el.addClass(field.invalidClass);

var t = this.invalidtooltip;
if(!t){
t = this.invalidtooltip = new Ext.ux.AnchorToolTip({
maxWidth : 600,
anchorImgCls : 'x-tip-anchor-invalid',
cls : 'x-form-invalid-tip',
anchor : 'left',
autoHide : false,
anchorToTarget : true
});
}
t.initTarget(field.getEl());
if(!t.rendered){
t.show();
t.hide();
}
t.body.update(msg);
t.doAutoWidth();
t.show();
},
clear : function(field){
field.el.removeClass(field.invalidClass);
if(this.invalidtooltip){
this.invalidtooltip.hide();
this.invalidtooltip.removeTarget();
}
}
}
});


the css style that i use it in the new messageTargets is this one



.x-tip-anchor-invalid {
background-image : url(../img/tip-anchor-invalid-sprite.gif);
}


and the image is this one

15063

the js file is

15064

all the comments are welcome