ExtJs证实了其十分强大的界面定制能力其中的提供的ToolTips功能比HTML里的如下语句定制性更强完全可以代替如下功能 <a title=TIPS>Some Text</a>
ExtJs是通过ExtToolTip和ExtQuickTips两个组件来实现浮动提示功能的其中ExtToolTip的定制功能很强具体效果可以参考具体配置代码如下 /*
* Ext JS Library
* Copyright(c) Ext JS LLC
*
*
*
*/
ExtonReady(function(){
new ExtToolTip({
target: tip
html: A very simple tooltip
});
new ExtToolTip({
target: ajaxtip
width:
autoLoad: {url: l}
dismissDelay: // auto hide after seconds
});
new ExtToolTip({
target: tip
html: Click the X to close me
title: My Tip Title
autoHide: false
closable: true
draggable:true
});
new ExtToolTip({
target: tracktip
title: Mouse Track
width:
html: This tip will follow the mouse while it is over the element
trackMouse:true
});
ExtQuickTipsinit();
});
但是ExtToolTip的缺点也是很明显的他需要在配置中写入提示内容文本这样如果想在表格中引用给表格中的某一列增加浮动提示这种情况就很不方便代码也会十分混乱（当然有高手是可以通过函数解决这个问题的请高手指点）ExtJs增加了一个扩展组件就是ExtQuickTips实际上正好解决这个问题支持在超文本中定义浮动提示的内容这样用ASPNET的数据绑定组件引用起来十分方便界面也比HTML中的那个缺省的样式好看唯一的缺点是QuickTips的定制没有ToolTip那么灵活像上面展示的支持拖拽鼠标点击关闭AJAX都不好实现但总比没有强下面我就说说这个QuickTips怎么具体配置
首先在header里增加ExtJS的引用
<link rel=stylesheet type=text/css />
<script type=text/javascript src=ext/extbasejs> </script>
<script type=text/javascript src=ext/extalljs> </script>
然后再在header里对ExtQuickTips配置
ExtQuickTipsinit(); 是必须的
Extapply(ExtQuickTipsgetQuickTip(){}); 是可选的如果你想使用缺省配置就完全可以省略掉这一段
maxWidth 最大宽度
minWidth 最小宽度
showDelay 延时显示（毫秒）
trackMouse 随着鼠标移动
hideDelay 延时自动隐藏 （缺省为true）
closable 显示关闭图标（但是这个图标显然只是一个样子鼠标点击不到它！）
autoHide 自动隐藏 （这个配置没用处不管是真是假都自动隐藏实际需要用下面的dismissDelay来控制）
draggable 支持用鼠标拖动（实际上这个选项也不起作用因为鼠标根本移动不到这里！）
dismissDelay 这个才是最有用的选项否则你完全可以省掉这段Extapply的配置因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏只有通过设置这个值为来关闭自动隐藏浮动提示！ <script type=text/javascript>
ExtQuickTipsinit();
Extapply(ExtQuickTipsgetQuickTip()
{
//maxWidth:
//minWidth:
//showDelay:
//trackMouse: true
//hideDelay: true
//closable: true
//autoHide: false
//draggable: true
dismissDelay:
});
</script>
最后在body里增加对ExtQuickTips的引用qtitile可以视情况而定可以省掉而仅仅保留qtip在qtip里增加绑定内容
<input type=button value=OK
class=tiptarget 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>
