ExtJs证实了其十分强大的界面定制能力,其中的提供的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
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>
分享到:
相关推荐
100行代码解决ExtJs4.1合并单元格问题
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
ExtJs 4.0 Grid 单元格合并控件封装
NULL 博文链接:https://stanly-xia.iteye.com/blog/1534256
extjs 简单表格呈现extjs 简单表格呈现extjs 简单表格呈现
extjs单元格合并,gridpanel中多行合并
解决extjs中的GridPanel的单元格在IE无法选中复制的问题
用extjs技术显示表格的信息,不过首先要导入extjs所需的库文件
ExtJs表格点击超链接获取行的值,和各种获取节点值的方法
Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色Extjs改变表格的颜色
NULL 博文链接:https://tipx.iteye.com/blog/718279
ext表格合并单元格的方法,合并表头的方法extjs的官网上有,这里提供的是合并数据单元格的方法
ExtJs Filter 实现表格行过滤Demo
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
extjs动态表格例子
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
NULL 博文链接:https://dejazhan.iteye.com/blog/871259
NULL 博文链接:https://anlinko.iteye.com/blog/725627
ASP.NET MVC5 +ExtJS6 表格个人学习示例 仅供学习参考使用
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例