本篇介绍提示控件，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>
<img src="http://www.cnblogs.com/Img/Ext/house.jpg"
alt="图片" />
</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: '按钮上的自定义提示信息'
});
|
效果展示：
本篇转自https://www.cnblogs.com/lipan/archive/2011/12/16/2286837.html