ExtJs是通过Ext.ToolTip和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.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>
就可以看到下面的效果:
转自:
http://www.yangxinyong.com/blog/entry/2008_08_20_42_extjsjc-TooltipsyQuickTips.html
分享到:
相关推荐
EXTJS与.NET的结合使用,使得开发者可以利用EXTJS的强大前端能力,与.NET的高效后端处理相结合,创建出功能强大且用户体验良好的Web应用。以下是一些关于EXTJS与.NET开发的关键知识点: 1. **EXTJS组件与.NET MVC**...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...
在技术架构上,EXTJS常与EJS(EasyJWeb+JPA+Spring2.5)后端框架配合使用,实现前后端分离。例如,蓝源OA系统也是采用这样的架构,同时引入acegi进行权限管理,提供日常办公、信息中心等功能。 为了更好地掌握EXTJS...
Extjs概念与目录结构 Extjs是一个基于JavaScript的框架,用于构建交互式的web应用。本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 -...
本实例主要探讨了如何利用ExtJS与后台的Java Servlet进行数据的增删改查操作,涉及的技术栈包括ExtJS、Servlet和Java。下面我们将深入讨论这些知识点。 首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用...
在IT行业中,Web开发是一项关键任务,而ExtJS与.Net框架的结合使用为开发者提供了强大的工具来构建功能丰富的、交互式的Web应用程序。本实例聚焦于如何利用这两个技术进行协同开发,特别是关注于数据网格(grid)的...
数据源可以是JSON、XML或其他数据格式,与服务器端的数据交互也十分便捷。 3. **布局管理**:框架内置了多种布局方式,如Fit布局、Border布局、Table布局等,用于自动调整组件的大小和位置,适应不同的屏幕尺寸和...
- 符号图标应与文本标签一起使用,以确保屏幕阅读器和其他辅助技术能够理解它们的含义,提升应用的无障碍性。 8. **性能优化**: - 考虑到加载大量图标可能影响性能,开发人员可能会选择按需加载图标,或者使用...
ExtJS的数据管理模型允许与后端服务进行交互,获取和更新数据。 5. **图片和其他资源**:可能包含图标、背景图片等,用于增强用户体验。 学习这些小例子时,你需要关注以下几个关键知识点: 1. **组件系统**:...
ExtJS3.0 源码分析与开发实例宝典
ExtJs框架与API,讲解详细,功能强大。
ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...
8. **集成其他EXTJS组件**:学习如何将图表与其他EXTJS组件(如表格、面板)一起使用,构建完整的应用界面。 通过深入学习并实践EXTJS的图形编程,开发者能够构建出具有专业级图形展示能力的Web应用,为用户提供...
1. EXTJS 下载与版本结构 EXTJS 3.4可以从官方下载(http://www.sencha.com/products/extjs3/download/ext-js-3.4.0/203)。3.4版本的结构包括以下几个主要部分: - adapter: 适配器,包含对jQuery、Prototype和YUI...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...
同时,3.x版本增强了数据绑定和模型(Model)的概念,使得数据与视图之间的交互更加直观和高效。3.2.1还修复了许多已知问题,提高了性能和稳定性。此外,ExtJS 3.x开始支持Safari和Opera浏览器,扩大了其跨平台的...
在ExtJS中,这样的组件通常会提供数据加载、异步通信、错误处理等功能,便于开发者构建与服务器交互的界面。 在深入探讨ExtJS皮肤时,我们需要知道的是,每个皮肤都由一系列CSS样式文件和对应的图像资源组成。通过...
EXTJS支持数据绑定,能够轻松地将UI组件与后台数据源连接,实现数据的实时更新。 11. **AJAX和远程数据交互**: EXTJS通过Store、Proxy和Model等机制,方便地进行AJAX请求,实现与服务器端的数据交换。 EXTJS是...