Extjs4 中 重写tooltip 自适应
1.在extjs 4 中，TextFiled等组件并没有发现tooltip这个属性，这里就重写了一个方法，在Ext，form.TextFileld新增了一个tooltip属性，详细如下所示：
Ext.override(Ext.form.TextField, {
tooltip:{text:"",title:""},
onRender:function(ct, position){
Ext.form.TextField.superclass.onRender.call(this, ct, position);
if(this.tooltip.text && this.tooltip.text !=""){
var t = this.tooltip.title;
if(t && t != ""){
new Ext.ToolTip({anchor: 'left',target:this.id,trackMouse:false,draggable:false,maxWidth:200,minWidth:100,title:this.tooltip.title,html:this.tooltip.text}).hide();
}else{
new Ext.ToolTip({anchor: 'left',target:this.id,trackMouse:false,draggable:false,maxWidth:200,minWidth:100,html:this.tooltip.text}).hide();
}
}
}
});
2. Ext .ToolTip本身有默认的最大宽度，如果内容很多，要全部展示就必须自适应宽度，可以重写ToolTip的宽度属性值，如下
Ext.override(Ext.ToolTip, {
maxWidth :0
});
下文转自：http://www.cnblogs.com/lipan/archive/2011/12/16/2286837.html
本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。
一、基本提示 Ext.tip.ToolTip
1.最简单的提示
下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：
[html]
|
1
|
<
div
id
=
"tip1"
class
=
"TipDiv"
>普通提示</
div
>
|
接着在js中添加如下代码：
[Js]
|
1
2
3
4
|
Ext.create(
'Ext.tip.ToolTip'
, {
target:
'tip1'
,
html:
'最简单的提示'
});
|
OK,第一个提示已经添加成功，我们来预览一下效果：
2.可关闭的提示
[html]
|
1
|
<
div
id
=
"tip2"
class
=
"TipDiv"
>不自动隐藏</
div
>
|
[Js]
|
1
2
3
4
5
6
7
8
|
Ext.create(
'Ext.tip.ToolTip'
, {
target:
'tip2'
,
html:
'请点击关闭按钮'
,
title:
'标题'
,
autoHide:
false
,
closable:
true
,
draggable:
true
//可以允许被拖动
});
|
效果如下，鼠标移移出后提示不消失，单击叉即可关闭：
3.Ajax提示，提示的内容来自服务端
[html]
|
1
|
<
div
id
=
"tip3"
class
=
"TipDiv"
> Ajax提示</
div
>
|
[Js]
|
1
2
3
4
5
6
|
Ext.create(
'Ext.tip.ToolTip'
, {
target:
'tip3'
,
width: 200,
autoLoad: { url:
'AjaxTipData'
, params: { data:
"测试参数"
} },
dismissDelay: 15000
//15秒后自动隐藏
});
|
在服务端通过MVC控制层action来返回提示内容，代码如下：
[c#]
|
1
2
3
4
|
public
ContentResult AjaxTipData(
string
data)
{
return
Content(
"<font color='red'>这是Ajax提示信息：</font><br>客户端参数："
+ data);
}
|
效果：
4.提示跟随鼠标移动
[html]
|
1
|
<
div
id
=
"tip4"
class
=
"TipDiv"
>跟随鼠标</
div
>
|
[Js]
|
1
2
3
4
5
|
Ext.create(
'Ext.tip.ToolTip'
, {
target:
'tip4'
,
html:
'跟随鼠标的提示'
,
trackMouse:
true
// 跟随鼠标移动
});
|
效果：
5.带箭头的提示
[html]
|
1
|
<
div
id
=
"tip6"
class
=
"TipDiv"
>指定提示方向</
div
>
|
[Js]
|
1
2
3
4
5
6
7
|
Ext.create(
'Ext.tip.ToolTip'
, {
target:
'tip6'
,
anchor:
'buttom'
,
//指定箭头的指向 top,left,right
width: 120,
anchorOffset: 50,
//指定箭头的位置
html:
'带箭头的提示，并指定方向'
});
|
效果：
5.图文并茂的提示内容
在提示内容中可以加入图片，超链接等以及如何html元素，还可以自定义提示标题：
[html]
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
div
id
=
"tip7"
class
=
"TipDiv"
> 高级自定义</
div
>
<
div
style
=
"display:none;"
>
<
div
id
=
"tipContent"
>
<
ul
>
<
li
>提示项1</
li
>
<
li
>提示项2</
li
>
<
li
>提示项3</
li
>
<
li
>提示项4</
li
>
</
ul
>
</
div
>
</
div
>
|
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
Ext.create(
'Ext.tip.ToolTip'
, {
title:
'<a href="#">链接式标题</a>'
,
id:
'toolTip7'
,
target:
'tip7'
,
anchor:
'left'
,
html:
null
,
width: 415,
autoHide:
false
,
closable:
true
,
contentEl:
'tipContent'
,
//用id为tipContent的html标签内容作为提示信息
listeners: {
'render'
:
function
() {
this
.header.on(
'click'
,
function
(e) {
e.stopEvent();
Ext.Msg.alert(
'提示'
,
'标题被点击.'
);
Ext.getCmp(
'toolTip7'
).hide();
},
this
, { delegate:
'a'
});
}
}
});
|
效果：
二、快速提示 Ext.tip.QuickTip
快速提示通过在html上添加特定的属性就可以体现出来，比较方便，只需要在代码里面通过如下方式初始化：
[Js]
|
1
|
Ext.QuickTips.init();
|
下面看看使用方式：
[html]
|
1
2
|
<
div
id
=
"tip5"
class
=
"TipDiv"
data-qtip
=
"用HTML属性表示的提示"
data-qtitle
=
"标题"
> 快速提示</
div
>
<
div
id
=
"tip52"
class
=
"TipDiv"
data-qtip
=
"设置了宽度、位置的快速提示"
data-qwidth
=
"400"
data-qalign
=
"tl-br"
> 快速提示2</
div
>
|
data-qtip:设置提示正文内容。
data-qtitle:设置提示的标题。
data-qwidth:设置提示的宽度。
data-qalign:表示用提示的一个基准点，对应到原件的哪个基准点。例如：tl-br表示用提示的左上角，对应到原件的右下角。
效果展示：
三、在extjs控件上使用提示
1.按钮上的快速提示
首先也要运行如下代码：
[Js]
|
1
|
Ext.QuickTips.init();
|
这样按钮配置项就可以使用“tooltip”了：
[Js]
|
1
2
3
4
5
|
Ext.create(
"Ext.Button"
, {
renderTo: Ext.get(
"tipdiv"
),
text:
"按钮上的快速提示"
,
tooltip:
"提示信息"
});
|
效果展示：
2.按钮上的自定义提示
[Js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//按钮上的自定义提示
Ext.create(
"Ext.Button"
, {
renderTo: Ext.get(
"tipdiv"
),
text:
"按钮上的自定义提示"
,
id:
"bt1"
});
Ext.create(
'Ext.tip.ToolTip'
, {
target:
'bt1'
,
anchor:
'buttom'
,
width: 120,
anchorOffset: 50,
html:
'按钮上的自定义提示信息'
});
|
效果展示：
