ExtJs4 笔记（7） Ext.tip.ToolTip 提示
本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。
一、基本提示 Ext.tip.ToolTip1.最简单的提示
下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：
[html]?1<div id="tip1" class="TipDiv">普通提示</div>接着在js中添加如下代码：
[Js]?1234Ext.create('Ext.tip.ToolTip', {????target: 'tip1',????html: '最简单的提示'});OK,第一个提示已经添加成功，我们来预览一下效果：
2.可关闭的提示[html]?1<div id="tip2" class="TipDiv">不自动隐藏</div>
[Js]?12345678Ext.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]?123456Ext.create('Ext.tip.ToolTip', {????target: 'tip3',????width: 200,????autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} },????dismissDelay: 15000???????? //15秒后自动隐藏});
在服务端通过MVC控制层action来返回提示内容，代码如下：
[c#]?1234public ContentResult AjaxTipData(string data){????return Content("<font color='red'>这是Ajax提示信息：</font><br>客户端参数：" + data);}效果：
4.提示跟随鼠标移动[html]?1<div id="tip4" class="TipDiv">跟随鼠标</div>
[Js]?12345Ext.create('Ext.tip.ToolTip', {????target: 'tip4',????html: '跟随鼠标的提示',????trackMouse: true??????????? //? 跟随鼠标移动});
效果：
5.带箭头的提示[html]?1<div id="tip6" class="TipDiv">指定提示方向</div>
[Js]?1234567Ext.create('Ext.tip.ToolTip', {????target: 'tip6',????anchor: 'buttom',?????????? //指定箭头的指向 top,left,right????width: 120,????anchorOffset: 50,?????????? //指定箭头的位置????html: '带箭头的提示，并指定方向'});
效果：
5.图文并茂的提示内容
在提示内容中可以加入图片，超链接等以及如何html元素，还可以自定义提示标题：
[html]?123456789101112<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]?1234567891011121314151617181920
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]?1Ext.QuickTips.init();下面看看使用方式：
[html]?12<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]?1Ext.QuickTips.init();这样按钮配置项就可以使用“tooltip”了：
[Js]?12345Ext.create("Ext.Button", {????renderTo: Ext.get("tipdiv"),????text: "按钮上的快速提示",????tooltip: "提示信息"});效果展示：
2.按钮上的自定义提示[Js]?12345678910111213//按钮上的自定义提示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: '按钮上的自定义提示信息'});
效果展示：
作者：李盼（Lipan）
出处：[Lipan]?（http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。