知识大全用ExtJs为表格单元格增加Tooltips浮动信息

Posted 2022-07-21 表格

篇首语：不怕路长，只怕志短。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全用ExtJs为表格单元格增加Tooltips浮动信息相关的知识，希望对你有一定的参考价值。

用ExtJs为表格单元格增加Tooltips浮动信息 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　ExtJs证实了其十分强大的界面定制能力其中的提供的ToolTips功能比HTML里的如下语句定制性更强完全可以代替如下功能 <a title= TIPS >Some Text</a>

　　ExtJs是通过Ext ToolTip和Ext QuickTips两个组件来实现浮动提示功能的其中Ext ToolTip的定制功能很强具体效果可以参考具体配置代码如下 /* * Ext JS Library * Copyright(c) Ext JS LLC * * * */ Ext onReady(function() new Ext ToolTip( target: tip : A very simple tooltip ); new Ext ToolTip( target: ajax tip width: autoLoad: url: l dismissDelay: // auto hide after seconds ); new Ext ToolTip( target: tip : Click the X to close me title: My Tip Title autoHide: false closable: true draggable:true ); new Ext ToolTip( target: track tip title: Mouse Track width: : This tip will follow the mouse while it is over the element trackMouse:true ); Ext QuickTips init(); );

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

　　首先在header里增加ExtJS的引用

　　然后再在header里对Ext QuickTips配置

　　Ext QuickTips init(); 是必须的

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

　　maxWidth 最大宽度

　　minWidth 最小宽度

　　showDelay 延时显示（毫秒）

　　trackMouse 随着鼠标移动

　　hideDelay 延时自动隐藏（缺省为true）

　　closable 显示关闭图标（但是这个图标显然只是一个样子鼠标点击不到它！）

　　autoHide 自动隐藏（这个配置没用处不管是真是假都自动隐藏实际需要用下面的dismissDelay来控制）

　　draggable 支持用鼠标拖动（实际上这个选项也不起作用因为鼠标根本移动不到这里！）

　　dismissDelay 这个才是最有用的选项否则你完全可以省掉这段Ext apply的配置因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏只有通过设置这个值为来关闭自动隐藏浮动提示！ <script type= text/javascript > Ext QuickTips init(); Ext apply(Ext QuickTips getQuickTip() //maxWidth: //minWidth: //showDelay: //trackMouse: true //hideDelay: true //closable: true //autoHide: false //draggable: true dismissDelay: ); </script>

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

cha138/Article/program/ASP/201311/21856

知识大全 用ExtJs为表格单元格增加Tooltips浮动信息

知识大全用ExtJs为表格单元格增加Tooltips浮动信息