知识大全 用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的引用

　　          <link rel= stylesheet type= text/css />        <script type= text/javascript src= ext /ext base js > </script>        <script type= text/javascript src= ext /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的配置 因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏 只有通过设置这个值为 来关闭自动隐藏浮动提示！          <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里增加绑定内容

　　<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>

相关参考