上面的按钮的tooltip实现在按钮的右下,出于某种需要,需要使tooltip显示在其他位置,比如 上方
试了下一般情况下的tooltip是可以实现这个需求的 anchor:'bottom' anchor:'top'
但button的tootlip不行
遂查看源码 :
Button.js
initButtonEl : function(btn, btnEl){
this.el = btn;
if(this.id){
this.el.dom.id = this.el.id = this.id;
}
if(this.icon){
btnEl.setStyle('background-image', 'url(' +this.icon +')');
}
if(this.tabIndex !== undefined){
btnEl.dom.tabIndex = this.tabIndex;
}
if(this.tooltip){
this.setTooltip(this.tooltip, true);
}
setTooltip : function(tooltip, /* private */ initial){
if(this.rendered){
if(!initial){
this.clearTip();
}
if(Ext.isObject(tooltip)){
Ext.QuickTips.register(Ext.apply({
target: this.btnEl.id
}, tooltip));
this.tooltip = tooltip;
}else{
this.btnEl.dom[this.tooltipType] = tooltip;
}
}else{
this.tooltip = tooltip;
}
return this;
},
Button实际上调用的是
Ext.QuickTips.register(Ext.apply({
target: this.btnEl.id
}, tooltip));
QuickTips.js
/**
* Configures a new quick tip instance and assigns it to a target element. See
* {@link Ext.QuickTip#register} for details.
* @param {Object} config The config object
*/
register : function(){
tip.register.apply(tip, arguments);
},
QuickTips调用的是QuickTip的register
QuickTip.js
/**
* Configures a new quick tip instance and assigns it to a target element. The following config values are
* supported (for example usage, see the {@link Ext.QuickTips} class header):
*
* - autoHide
* - cls
* - dismissDelay (overrides the singleton value)
* - target (required)
* - text (required)
* - title
* - width
* @param {Object} config The config object
*/
register : function(config){
var cs = Ext.isArray(config) ? config : arguments;
for(var i = 0, len = cs.length; i < len; i++){
var c = cs[i];
var target = c.target;
if(target){
if(Ext.isArray(target)){
for(var j = 0, jlen = target.length; j < jlen; j++){
this.targets[Ext.id(target[j])] = c;
}
} else{
this.targets[Ext.id(target)] = c;
}
}
}
},
这里看注释就明白了
The following config values are supported (for example usage, see the Ext.QuickTips class header):
只支持这几种属性,里面没有配置anchor的
==================================================
http://www.extjs.com/forum/showthread.php?t=27886 相关的帖子
Ext.QuickTips.init()
Ext.apply( Ext.QuickTips.getQuickTip(), {
defaultAlign:'l-r',
maxWidth:500,
minWidth:200,
showDelay:200
});