详解extjs的Tooltips与QuickTips

详解extjs的Tooltips与QuickTips

转自：/article/5386691.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

View Code

1 var grid= new Ext.grid.gridPanel(gridConfig);

2  grid.on('render', function(grid) {

3  var store = grid.getStore();

4  var view = grid.getView();

5    grid.tip = new Ext.ToolTip({

6           target: view.mainBody,

7           delegate: '.x-grid3-row',

8           trackMouse: true,

9           renderTo: document.body,

10           listeners: {

11                     beforeshow: function updateTipBody(tip) {

12                              var rowIndex = view.findRowIndex(tip.triggerElement);

13                             tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;

14                                    }

15                      }

16

17     });

18 });