ld_hust 发表于 2013-1-23 02:09:34

如何使用ExtJs为表格单元格增加Tooltips(QuickTips)浮动信息

ExtJs证实了其十分强大的界面定制能力,其中的提供的ToolTips功能比HTML里的如下语句定制性更强,完全可以代替如下功能
<a href="http://dfdfd" title="TIPS">Some Text</a>
 
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的,其中Ext.ToolTip的定制功能很强,具体效果可以参考,具体配置代码如下,
<div class="cnblogs_code">http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifToolTip配置代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif/**//*
 2http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif * Ext JS Library 2.1
 3http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif * Copyright(c) 2006-2008, Ext JS, LLC.
 4http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif * licensing@extjs.com
 5http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif * 
 6http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif * http://extjs.com/license
 7http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif */
 8http://www.cnblogs.com/Images/OutliningIndicators/None.gif
 9http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifExt.onReady(function()http://www.cnblogs.com/Images/dot.gif{
10http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    new Ext.ToolTip(http://www.cnblogs.com/Images/dot.gif{
11http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        target: 'tip1',
12http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        html: 'A very simple tooltip'
13http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
14http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
15http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    new Ext.ToolTip(http://www.cnblogs.com/Images/dot.gif{
16http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        target: 'ajax-tip',
17http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        width: 200,
18http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        autoLoad: http://www.cnblogs.com/Images/dot.gif{url: 'ajax-tip.html'},
19http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        dismissDelay: 15000 // auto hide after 15 seconds
20http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
21http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
22http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    new Ext.ToolTip(http://www.cnblogs.com/Images/dot.gif{
23http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        target: 'tip2',
24http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        html: 'Click the X to close me',
25http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        title: 'My Tip Title',
26http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        autoHide: false,
27http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        closable: true,
28http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        draggable:true
29http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
30http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
31http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    new Ext.ToolTip(http://www.cnblogs.com/Images/dot.gif{
32http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        target: 'track-tip',
33http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        title: 'Mouse Track',
34http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        width:200,
35http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        html: 'This tip will follow the mouse while it is over the element',
36http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        trackMouse:true
37http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
38http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
39http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
40http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    Ext.QuickTips.init();
41http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
42http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif});
页: [1]
查看完整版本: 如何使用ExtJs为表格单元格增加Tooltips(QuickTips)浮动信息