原创 ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的 收藏
Ext.QuickTips
QuickTips代码示例:只需要加入Ext.QuickTips.init(); 就可以在html页面中使用。html页面 可以通过:
<input type="button" value="OK" ext:qtitle="Test" ext:qtip="Test Content!">
我们可以看到下面的效果:
你也可以自定义这些QuickTips的属性:
Ext.apply(Ext.QuickTips.getQuickTip(), {
//maxWidth: 200,
//minWidth: 100,
//showDelay: 50,
//trackMouse: true,
//hideDelay: true,
//closable: true,
//autoHide: false,
//draggable: true,
dismissDelay: 0
});
说明:
Ext.QuickTips.init(); 必须的
Ext.apply(Ext.QuickTips.getQuickTip(),{...}); 是可选的,如果你想使用缺省配置,就完全可以省略掉这一段。
maxWidth 最大宽度
minWidth 最小宽度
showDelay 延时显示(毫秒)
trackMouse 随着鼠标移动
hideDelay 延时自动隐藏 (缺省为true)
closable 显示关闭图标(但是这个图标显然只是一个样子,鼠标点击不到它!)
autoHide 自动隐藏 (这个配置没用处,不管是真是假,都自动隐藏,实际需要用下面的dismissDelay来控制)
draggable 支持用鼠标拖动(实际上这个选项也不起作用,因为鼠标根本移动不到这里!)
dismissDelay 这个才是最有用的选项,否则你完全可以省掉这段Ext.apply的配置。因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏。只有通过设置这个值为0来关闭自动隐藏浮动提示!
Ext.ToolTip
Ext.ToolTip代码:
new Ext.ToolTip({
target: 'tip1',
html: 'test tooltip'
});
在html页面中加入:<a id=tip1 href="">11</a> 就可以看到下面的效果:
可以通过ToolTip设置图层自动ajax加载页面,代码:
new Ext.ToolTip({
target: 'ajax-tip',
width: 200,
autoLoad: {url: 'test/1.jsp'},
});
在html页面中加入:<a id=ajax-tip href="">ajaxtip</a> 就可以看到下面的效果:
打开的层可以关闭,代码:
new Ext.ToolTip({
target: 'close-tip',
html: 'test close',
title: 'test',
autoHide: false,
closable: true,
draggable:true
});
在html页面中加入:<a id='close-tip href="">'closetip</a> 就可以看到下面的效果:
打开的层随鼠标移动,代码:
new Ext.ToolTip({
target: 'track-tip',
title: 'Mouse Track',
width:200,
html: 'This tip will follow the mouse while it is over the element',
trackMouse:true,
dismissDelay: 15000
});
在html页面中加入:<a id=track-tip href="">tracktip</a> 就可以看到下面的效果:
分享到:
相关推荐
ExtJS tooltip功能组件实例
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
NULL 博文链接:https://atian25.iteye.com/blog/1019910
一、基本提示 Ext.tip.ToolTip 52 二、快速提示 Ext.tip.QuickTip 58 三、在extjs控件上使用提示 59 第八章 Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件 61 一、滚轴控件 Ext.slider ...
Ext Extjs 禁止文本和日期编辑 ExtJS中动态设置TextField的readOnly属性
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
EXTjs的上传组件
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种
ExtJS开发插件及Ext包.一个是Spket一个是Ext包
ext.jsb spket ExtJS dreamweaver
该ext.jsb2文件是ExtJS3.4.0中的,因ExtJS4.0.0中没有这个文件,但可以与4.0.0版本共用。
ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
如何给Ext.panel增加一个背景图片