- 浏览: 1615093 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时,在页面上会出现一个对该元素说明并悬浮在屏幕上的提示区域,当鼠标移出该元素,则该提示区域会自动隐藏。
传统html方式我们采取title标签或者alt标签
在我们使用的ExtJS中专门提供了一个Tip类来为我们提供这样的消息提示功能(Ext.Tip)。
Tip是继承于Panel的,配置选项中的closable:boolean表示可关闭,DefaultAlign对齐方式,maxWidth最大宽度等都是tip类中自己定义的。
Tip是可以通过配置选项方式进行创建。
我们来做一个提示框 看看效果
我们这里通过showAt方式进行渲染,这里的showAt方式和menu中的类似。
这里需要注意的是配置选项中的heigth不起作用,这一点与Panel不同。
我们也可以通过showBy( Mixed el, [String position] )方法渲染
其中第一个元素可以是el也可以是字符串,字符串内容一般是元素id。[String position]表示相对于指定元素的位置
我们来指定一下位置
目前来看更像一个显示面板,并没有起到提示作用。
如果要起到提示作用,我们可以对相应元素中添加一些事件
这样虽然实现了提示框功能,不过每次在使用上非常繁琐。所以Ext提供了一个便捷的方式他是Ext.ToolTip,Ext.QuickTips方式。
ToolTip是Tip的子类,QuickTips是ToolTip的子类。
我们来使用一下ToolTip
我们通过target指定元素 可以是id和el,无需为元素手动添加mouseover,mouseout事件。
其中trackMouse:boolean属性是表示是否跟随鼠标移动。
如果我们页面中有很多元素都需要进行提示框操作,这样即便是使用ToolTip方式也未免操作复杂,性能开销很大。
使用QuickTip进行全局提示框管理。
QuickTip需要进行全局初始化操作。
如果我们注册多个
Ext也为我们提供了一些和传统方法类似的方式,就是在html标签中加入ext:qtitle和ext:qtip标签
需要注意 : 即便是使用这种方式Ext.QuickTips.init();的初始化方法不能丢弃
在一些组件中也有一些关于tooltip和qtip的配置,可以参考Toolbar的讲解
传统html方式我们采取title标签或者alt标签
<div title="hello" alt="hello">hello tip</div> <IMG SRC="icon-warning.gif" ALT="aa">
在我们使用的ExtJS中专门提供了一个Tip类来为我们提供这样的消息提示功能(Ext.Tip)。
Tip是继承于Panel的,配置选项中的closable:boolean表示可关闭,DefaultAlign对齐方式,maxWidth最大宽度等都是tip类中自己定义的。
Tip是可以通过配置选项方式进行创建。
我们来做一个提示框 看看效果
<body> <div id="tip_test">提示框演示</div> </body>
Ext.onReady(function(){ var tip = new Ext.Tip({ title:"tip title", html:"tip content", width:400 }) var el = Ext.get("tip_test"); tip.showAt([200,200]); });
我们这里通过showAt方式进行渲染,这里的showAt方式和menu中的类似。
这里需要注意的是配置选项中的heigth不起作用,这一点与Panel不同。
我们也可以通过showBy( Mixed el, [String position] )方法渲染
其中第一个元素可以是el也可以是字符串,字符串内容一般是元素id。[String position]表示相对于指定元素的位置
Ext.onReady(function(){ var tip = new Ext.Tip({ title:"tip title", html:"tip content", width:400 }) var el = Ext.get("tip_test"); tip.showBy(el); });
我们来指定一下位置
Ext.onReady(function(){ var tip = new Ext.Tip({ title:"tip title", html:"tip content", width:400 }) var el = Ext.get("tip_test"); tip.showBy(el,"tl-br"); });
目前来看更像一个显示面板,并没有起到提示作用。
如果要起到提示作用,我们可以对相应元素中添加一些事件
Ext.onReady(function(){ var tip = new Ext.Tip({ title:"tip title", html:"tip content", width:400 }) var el = Ext.get("tip_test"); el.on("mouseover",function(e){ tip.showBy(el,"tl-br"); }); el.on("mouseout",function(e){ tip.hide(); }); });
这样虽然实现了提示框功能,不过每次在使用上非常繁琐。所以Ext提供了一个便捷的方式他是Ext.ToolTip,Ext.QuickTips方式。
ToolTip是Tip的子类,QuickTips是ToolTip的子类。
我们来使用一下ToolTip
var ttip =new Ext.ToolTip({ width:400, html:"toolTip content", target:"tip_test" });
我们通过target指定元素 可以是id和el,无需为元素手动添加mouseover,mouseout事件。
其中trackMouse:boolean属性是表示是否跟随鼠标移动。
如果我们页面中有很多元素都需要进行提示框操作,这样即便是使用ToolTip方式也未免操作复杂,性能开销很大。
使用QuickTip进行全局提示框管理。
QuickTip需要进行全局初始化操作。
<body> <div id="tip_test" style="width:100">提示框演示</div> <div id="tip_test2" style="width:100">提示框演示2</div> <div id="tip_test3" style="width:100">提示框演示3</div> </body>
Ext.QuickTips.init(); var qtip = Ext.QuickTips.getQuickTip(); qtip.register({ target:"tip_test", text:"你好" });
如果我们注册多个
Ext.QuickTips.init(); var qtip = Ext.QuickTips.getQuickTip(); qtip.register({ target:"tip_test", text:"你好" }); qtip.register({ target:"tip_test2", text:"你好" }); qtip.register({ target:"tip_test3", text:"你好" });
Ext也为我们提供了一些和传统方法类似的方式,就是在html标签中加入ext:qtitle和ext:qtip标签
<body> <div id="tip_test" style="width:100" ext:qtitle="提示标题" ext:qtip="提示">提示框演示</div> <div id="tip_test2" style="width:100">提示框演示2</div> <div id="tip_test3" style="width:100">提示框演示3</div> </body>
需要注意 : 即便是使用这种方式Ext.QuickTips.init();的初始化方法不能丢弃
在一些组件中也有一些关于tooltip和qtip的配置,可以参考Toolbar的讲解
发表评论
-
ExtJS 2 系列教程
2009-02-08 18:23 3257如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
[ExtJS2.1教程-7]Tree(树控件)
2009-02-08 18:10 8061树控件: 树是由根节点、叶子节点、非叶子节点(目录节点)组成的 ... -
[ExtJS2.1教程-5]ToolBar(工具栏)
2009-02-07 09:25 9699面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具 ... -
[ExtJS2.1教程-4]Menu(菜单)
2009-02-04 21:20 9883menu.html <html> < ... -
[ExtJs 2.02]Grid默认选择首行并允许键盘操作
2009-01-23 14:39 4192grid默认选中第一行问题解决了 grid.getSelect ... -
[电子书]LearningExtJS(完整版2.01 en)
2009-01-22 11:11 2310What you will learn from this ... -
[ExtJs 2.02]ajax文件上传
2009-01-21 15:32 7180例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题 ... -
[ExtJs 2.02]Combobox的使用
2009-01-21 10:51 28211.简单使用: <!DOCTYPE HTML PUB ... -
grid设置某列背景颜色
2009-01-16 10:47 1824css .x-grid-back-red { back ... -
grid设置某行字体颜色
2009-01-16 10:34 3536css代码 .x-grid-record-red ... -
Ext2.0.2用于netbeans的JavaScript的库
2009-01-05 14:39 1672Ext2.0.2用于netbeans的JavaScript的库 ... -
Ext2.1API中文文档
2009-01-04 08:58 2515Ext2.1API中文文档 基本上Ext2系列都实用 需要Ad ... -
[ExtJS2.1教程-3]事件机制
2009-01-02 23:26 3407javascript的事件我们用的最多的就是用于表单验证 现在 ... -
[ExtJS2.1教程-2]组件的使用
2009-01-02 19:09 2634我们还是以alert为例 首 ... -
[ExtJS2.1教程-1]HelloWorld
2009-01-02 14:16 2655ExtJS:一个很强大的ui库 创建一个漂亮的alert &q ... -
Ext Tree控件的使用
2008-12-21 19:35 19682树是一个我们日常用的组件,Ext给我们提供了一个非常好用的树控 ... -
ext的一些组件中常用的参数整理
2008-04-15 05:33 2514grid 中的render里的参数: value:当前单元格 ... -
Ext Docs(2.0) 本地化处理,已生成CHM文件了
2008-01-15 16:27 4293ext2 的chm文档 ajaxjs论坛上发现的 不敢独享~~ ...
相关推荐
extjs demo; blog url:http://write.blog.csdn.net/postlist
6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data.Connection篇二 24 12. Ext.Updater篇一 26 13. ...
ExtJS入门教程-超级详细-共36页 完整版 PDF,电子书方便阅读和分享。
extjs-theme-bootstrap-master.zip
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
很强大的开发包,能做出和WINDOWS一样的操作界面
「extjs入门教程-SSHMavenExtjs4MySQL实战开发」.docx
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs 2.1 中文文档\电子文档extjs 2.1 中文文档\电子文档
ExtJS快速入门--传智播客--蔡世友
语言程序设计资料:ExtJs学习笔记-2积分.doc
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
Extjs2.1源码%2B教程,对于想学习ExtJS的人来说是再好也不过了
ExtJS----HelloWorld程序源码
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
EXTJS4 类似于bootstrap的主题
Extjs4---combobox省市区三级联动+struts2
Extjs4---grid的修改、删除功能---结合struts2、hibernate
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等