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

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

ExtJs证实了其十分强大的界面定制能力，其中的提供的ToolTips功能比HTML里的如下语句定制性更强，完全可以代替如下功能

<a href="http://dfdfd" title="TIPS">Some Text</a>

?

ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的，其中Ext.ToolTip的定制功能很强，具体效果可以参考，具体配置代码如下，

ToolTip配置代码
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->?1/**//*
?2?*?Ext?JS?Library?2.1
?3?*?Copyright(c)?2006-2008,?Ext?JS,?LLC.
?4?*?licensing@extjs.com
?5?*?
?6?*?http://extjs.com/license
?7?*/
?8
?9Ext.onReady(function(){
10????new?Ext.ToolTip({
11????????target:?'tip1',
12????????html:?'A?very?simple?tooltip'
13????});
14
15????new?Ext.ToolTip({
16????????target:?'ajax-tip',
17????????width:?200,
18????????autoLoad:?{url:?'ajax-tip.html'},
19????????dismissDelay:?15000?//?auto?hide?after?15?seconds
20????});
21
22????new?Ext.ToolTip({
23????????target:?'tip2',
24????????html:?'Click?the?X?to?close?me',
25????????title:?'My?Tip?Title',
26????????autoHide:?false,
27????????closable:?true,
28????????draggable:true
29????});
30
31????new?Ext.ToolTip({
32????????target:?'track-tip',
33????????title:?'Mouse?Track',
34????????width:200,
35????????html:?'This?tip?will?follow?the?mouse?while?it?is?over?the?element',
36????????trackMouse:true
37????});
38
39
40????Ext.QuickTips.init();
41
42});

?

?

但是Ext.ToolTip的缺点也是很明显的，他需要在配置中写入提示内容文本，这样如果想在表格中引用，给表格中的某一列增加浮动提示这种情况就很不方便，代码也会十分混乱。（当然有高手是可以通过函数解决这个问题的，请高手指点）。ExtJs2.0增加了一个扩展组件就是Ext.QuickTips实际上正好解决这个问题，支持在超文本中定义浮动提示的内容，这样用ASP.NET的数据绑定组件引用起来十分方便，界面也比HTML中的那个缺省的样式好看，唯一的缺点是QuickTips的定制没有ToolTip那么灵活，像上面展示的支持拖拽，鼠标点击关闭，AJAX都不好实现，但总比没有强。下面我就说说，这个QuickTips怎么具体配置，

?

首先在header里增加ExtJS的引用

<link?rel="stylesheet"?type="text/css"?href="ext-2.1/resources/css/ext-all.css"?/>
<script?type="text/javascript"?src="ext-2.1/ext-base.js">?</script>
<script?type="text/javascript"?src="ext-2.1/ext-all.js">?</script>

?

然后再在header里对Ext.QuickTips配置

Ext.QuickTips.init(); 是必须的

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

maxWidth 最大宽度 minWidth 最小宽度
showDelay 延时显示（毫秒） trackMouse 随着鼠标移动
hideDelay 延时自动隐藏 （缺省为true）
closable 显示关闭图标（但是这个图标显然只是一个样子，鼠标点击不到它！） autoHide 自动隐藏 （这个配置没用处，不管是真是假，都自动隐藏，实际需要用下面的dismissDelay来控制）
draggable 支持用鼠标拖动（实际上这个选项也不起作用，因为鼠标根本移动不到这里！） dismissDelay 这个才是最有用的选项，否则你完全可以省掉这段Ext.apply的配置。因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏。只有通过设置这个值为0来关闭自动隐藏浮动提示！
<script?type="text/javascript">
Ext.QuickTips.init();
Ext.apply(Ext.QuickTips.getQuickTip(),?{
????//maxWidth:?200,
????//minWidth:?100,
????//showDelay:?50,
????//trackMouse:?true,
????//hideDelay:?true,
??
????//closable:?true,
????//autoHide:?false,
??? //draggable:?true,

????dismissDelay:?0
});
</script>

?

?最后在body里增加对Ext.QuickTips的引用，qtitile可以视情况而定可以省掉而仅仅保留qtip，在qtip里增加绑定内容。

<input?type="button"?value="OK"
class="tip-target"?ext:qtitle="OK?Button"?ext:qtip="This?is?a?quick?tip?from?markup!">
</input>?

<asp:ListView??>

<ItemTemplate>
<div?id="sample"
ext:qtitle='<%#?Eval("TipsTitleField")?%>' ext:qtip='<%#?Eval("TipsField")?%>'>
<%#?Eval("SampleField")?%>
</div>
</ItemTemplate>
</asp:ListView>

查看更多 下一篇