您的位置:首页 > 其它

重写ext的TextField控件,增加鼠标悬浮提示和控件后加说明文字

2012-02-08 10:49 786 查看
在使用ext的过程中,有时需要在TextField后加上说明性文字和鼠标悬浮提示的需求,在网上找到相关资料在整合了下

Ext.override(Ext.form.TextField, {

followtext: {text:'',class:''}, //控件后说明内容,可以自己增加项

tooltip: {text:'',title:''}, //鼠标悬浮提示,可以自己增加项

onRender: function (ct, position) {

Ext.form.TextField.superclass.onRender.call(this, ct, position);

var followlength = 0; //字符占位长度px

if (this.followtext.text != '') {

this.followEl = ct.createChild({

tag: 'div',

html: this.followtext.text

});

if (this.followtext.class)

this.followEl.addClass(this.followtext.class);

else

this.followEl.addClass('x-form-follow');

followlength = this.followtext.text.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2;

this.width = this.width - followlength;

this.alignErrorIcon = function () {

this.errorIcon.alignTo(this.followEl, 'tl-tr', [2, 0]);

};

}

//鼠标移到文本框上时提示

if (this.tooltip.text) {

new Ext.ToolTip({

target: this.id,

trackMouse: false,

draggable: true,

maxWidth: 200,

minWidth: 100,

title: this.tooltip.title,

html: this.tooltip.text

});

}

}

});

效果:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: