extjs的Tooltips与QuickTips

关键字: extjs tooltips quicktips ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的。

QuickTips代码示例：只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过：
Java 代码

1. <input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">   

<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
我们可以看到下面的效果：



你也可以自定义这些QuickTips的属性：

Java 代码

1. Ext.apply(Ext.QuickTips.getQuickTip(), {  
2.     //maxWidth: 200,  
3.     //minWidth: 100,  
4.     //showDelay: 50,  
5.     //trackMouse: true,  
6.     //hideDelay: true,  
7.     
8.     //closable: true,  
9.     //autoHide: false,  
10.     //draggable: true,  
11.      dismissDelay: 0  
12. });  

Ext.apply(Ext.QuickTips.getQuickTip(), { //maxWidth: 200, //minWidth: 100, //showDelay: 50, //trackMouse: true, //hideDelay: true, //closable: true, //autoHide: false, //draggable: true, dismissDelay: 0 });
---------------这段代码测试不成功，请高手指点---------------------

Ext.ToolTip代码：

Java 代码

1. new Ext.ToolTip({  
2.         target: 'tip1',  
3.         html: 'test tooltip'  
4. });  

new Ext.ToolTip({ target: 'tip1', html: 'test tooltip' });

在html页面中加入：

Java 代码

1. <a id=tip1 href="">11</a>   

<a id=tip1 href="">11</a>

就可以看到下面的效果：



可以通过ToolTip设置图层自动ajax加载页面，代码：

Java 代码

1. new Ext.ToolTip({  
2.       target: 'ajax-tip',  
3.       width: 200,  
4.       autoLoad: {url: 'test/1.jsp'}  
5. });  

new Ext.ToolTip({ target: 'ajax-tip', width: 200, autoLoad: {url: 'test/1.jsp'} });

在html页面中加入：

Java 代码

1. <a id=ajax-tip href="">ajaxtip</a>  

<a id=ajax-tip href="">ajaxtip</a>

就可以看到下面的效果：


打开的层可以关闭，代码：

Java 代码

1. new Ext.ToolTip({  
2.          target: 'close-tip',  
3.          html: 'test close',  
4.          title: 'test',  
5.          autoHide: false,  
6.          closable: true,  
7.          draggable:true  
8. });  

new Ext.ToolTip({ target: 'close-tip', html: 'test close', title: 'test', autoHide: false, closable: true, draggable:true });


在html页面中加入：

Java 代码

1. <a id='close-tip href="">'closetip</a>   

<a id='close-tip href="">'closetip</a>

就可以看到下面的效果：


打开的层随鼠标移动，代码：
Java 代码

1. new Ext.ToolTip({  
2.         target: 'track-tip',  
3.         title: 'Mouse Track',  
4.         width:200,  
5.         html: 'This tip will follow the mouse while it is over the element',  
6.         trackMouse:true,  
7.         dismissDelay: 15000  
8. });  

new Ext.ToolTip({ target: 'track-tip', title: 'Mouse Track', width:200, html: 'This tip will follow the mouse while it is over the element', trackMouse:true, dismissDelay: 15000 });

在html页面中加入:

Java 代码

1. <a id=track-tip href="">tracktip</a>   

<a id=track-tip href="">tracktip</a>

就可以看到下面的效果：


转自： http://www.yangxinyong.com/blog/entry/2008_08_20_42_extjsjc-TooltipsyQuickTips.html