FreeOZ论坛

标题: 如何使用ExtJs为表格单元格增加Tooltips(QuickTips)浮动信息 [打印本页]

作者: xblues 时间: 23-7-2008 08:01
提示: 作者被禁止或删除, 无法发言 标题: 如何使用ExtJs为表格单元格增加Tooltips(QuickTips)浮动信息
tJs证实了其十分强大的界面定制能力，其中的提供的ToolTips功能比HTML里的如下语句定制性更强，完全可以代替如下功能
<a href="http://dfdfd" title="TIPS">Some Text</a>

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

Ext.onReady(function()

{
10

new Ext.ToolTip(

{
11

target: 'tip1',
12

html: 'A very simple tooltip'
13

});
14

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

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

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

Ext.QuickTips.init();
41

});

但是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来关闭自动隐藏浮动提示！

最后在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

<div id="sample"

ext:qtitle='<%# Eval("TipsTitleField") %>' ext:qtip='<%# Eval("TipsField") %>'>

# Eval("SampleField") %>

</div>

</ItemTemplate>

</asp： ListView>

[ 本帖最后由 xblues 于 23-7-2008 05:04 编辑 ]

欢迎光临 FreeOZ论坛 (https://www.freeoz.org/bbs/)