详解extjs的Tooltips与QuickTips

转自：http://www.cnblogs.com/suanmeitang/archive/2012/03/29/2424286.html

它们都是实现浮动提示功能的，当鼠标移过目标元素时，提供需要显示的附加信息。

首先看一下它们的集成体系:Ext.QuickTips继承Ext.Tooltips

　　　　　　　　　　　　 Ext.Tooltips集成Ext.Tips

　　　　　　　　　　　　 Ext.Tips继承Ext.Panel

说到底它还是个Panel，原来都是写Tooltips，后来发现要配置许多项，很麻烦，所以QuickTips的出现简化了配置。

所以当QuickTips能满足我们的需求时干嘛还去用Tooltips呢

要使用QuickTips必须在使用前写这么一句：Ext.QuickTips.init();QuickTips是单例的，这句代码是为了告诉ext我们要用悬浮提示功能，马上给我初始化tips,

Quicktips可以通过标签的属性直接在标签中配置，或者通过编程使用register方法来使用，下面介绍下这两种方法的使用

（一）使用QuickTips的register方法

Ext.apply(Ext.QuickTips.getQuickTip(),{配置选项});
是可选的，如果你想使用缺省配置，就完全可以省略掉这一段。

QuickTip是单态的，Ext.QuickTips.getQuickTip()得到的是它的单态实例

它的单态配置选项，都是可选的

maxWidth 最大宽度
minWidth 最小宽度
showDelay 延时显示（毫秒）
trackMouse 随着鼠标移动
hideDelay 延时自动隐藏（缺省为true）
dismissDelay 缺省情况下这个浮动提示是经过一段时间以后就自动隐藏，如果这个值设置为0则关闭自动隐藏浮动提示

除非特别指定，其余均为可选项

autoHide
cls
dismissDelay (如果在此定义，将覆盖单例的值)
target (必须的)
text (必须的)
title
width

 1 // 初始化单例。任何基于标签的快速提示开始工作。
 2 Ext.QuickTips.init();
 3 
 4 // 将一些配置属性应用到此单态
 5 Ext.apply(Ext.QuickTips.getQuickTip(), {
 6     maxWidth: 200,
 7     minWidth: 100,
 8     showDelay: 50,
 9     trackMouse: true
10 });
11 
12 // 为指定的元素手工配置一个快速提示
13 Ext.QuickTips.register({
14     target: 'my-div',//在哪个html元素上显示
15     title: 'My Tooltip',
16     text: 'This tooltip was added in code',//具体要提示的东西
17     width: 100,
18     dismissDelay: 20
19 });

（二）使用html标签属性

需要在标签中注册一个快速提示，你只要简单地添加一个或多个合法的QuickTip属性，以ext:命名空间前缀开头。
HTML元素自己将被自动地设置成快速提示的目标。以下是所有支持属性的列表(除非特别指定，其它均为可选项):

qclass: 应用到此快速提示的CSS样式(等同于目标元素的'cls'配置项的target元素)。
qtip (required): 快速提示的文本(等同于目标元素的'text'配置项)。
qtitle: 快速提示的标题(等同于目标元素的'title'配置项)。
qwidth: 快速提示的宽度(等同于目标元素的'width'配置项)。

1 // 向一个HTML按钮中添加一个快速提示
2 <input type="button" value="OK" ext:qtitle"OK Button" ext:qwidth="100" ext:qtip="This is a quick tip from markup!"></input>