`
Virgo_S
  • 浏览: 1150995 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs的Tooltips与QuickTips

    博客分类:
  • JS
阅读更多
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







分享到:
评论
2 楼 依山慕雪 2013-12-09  
同问,怎么自动换行
1 楼 henchong 2013-01-22  
提示信息要是英文乱符或者是直接全是数字,我的提示信息就不会自动换行,这个不知道怎么解决

相关推荐

    EXTJS与.NET开发

    EXTJS与.NET的结合使用,使得开发者可以利用EXTJS的强大前端能力,与.NET的高效后端处理相结合,创建出功能强大且用户体验良好的Web应用。以下是一些关于EXTJS与.NET开发的关键知识点: 1. **EXTJS组件与.NET MVC**...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    ExtJS与.NET结合开发实例

    ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    EXTJS介绍与开发指南

    在技术架构上,EXTJS常与EJS(EasyJWeb+JPA+Spring2.5)后端框架配合使用,实现前后端分离。例如,蓝源OA系统也是采用这样的架构,同时引入acegi进行权限管理,提供日常办公、信息中心等功能。 为了更好地掌握EXTJS...

    轻松搞定Extjs 带目录

    Extjs概念与目录结构 Extjs是一个基于JavaScript的框架,用于构建交互式的web应用。本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 -...

    Extjs 与后台交互的实例

    本实例主要探讨了如何利用ExtJS与后台的Java Servlet进行数据的增删改查操作,涉及的技术栈包括ExtJS、Servlet和Java。下面我们将深入讨论这些知识点。 首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用...

    ExtJs与.Net结合开发实例

    在IT行业中,Web开发是一项关键任务,而ExtJS与.Net框架的结合使用为开发者提供了强大的工具来构建功能丰富的、交互式的Web应用程序。本实例聚焦于如何利用这两个技术进行协同开发,特别是关注于数据网格(grid)的...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    数据源可以是JSON、XML或其他数据格式,与服务器端的数据交互也十分便捷。 3. **布局管理**:框架内置了多种布局方式,如Fit布局、Border布局、Table布局等,用于自动调整组件的大小和位置,适应不同的屏幕尺寸和...

    包含各种类型的extjs小图标,Extjs4小图标

    - 符号图标应与文本标签一起使用,以确保屏幕阅读器和其他辅助技术能够理解它们的含义,提升应用的无障碍性。 8. **性能优化**: - 考虑到加载大量图标可能影响性能,开发人员可能会选择按需加载图标,或者使用...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    ExtJS的数据管理模型允许与后端服务进行交互,获取和更新数据。 5. **图片和其他资源**:可能包含图标、背景图片等,用于增强用户体验。 学习这些小例子时,你需要关注以下几个关键知识点: 1. **组件系统**:...

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    ExtJs框架与API.rar

    ExtJs框架与API,讲解详细,功能强大。

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    EXTjs图开编程EXTJS

    8. **集成其他EXTJS组件**:学习如何将图表与其他EXTJS组件(如表格、面板)一起使用,构建完整的应用界面。 通过深入学习并实践EXTJS的图形编程,开发者能够构建出具有专业级图形展示能力的Web应用,为用户提供...

    extjs 3.4 开发前准备

    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快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    Extjs 2.2 Extjs 3.21 js

    同时,3.x版本增强了数据绑定和模型(Model)的概念,使得数据与视图之间的交互更加直观和高效。3.2.1还修复了许多已知问题,提高了性能和稳定性。此外,ExtJS 3.x开始支持Safari和Opera浏览器,扩大了其跨平台的...

    ExtJS经典皮肤集合

    在ExtJS中,这样的组件通常会提供数据加载、异步通信、错误处理等功能,便于开发者构建与服务器交互的界面。 在深入探讨ExtJS皮肤时,我们需要知道的是,每个皮肤都由一系列CSS样式文件和对应的图像资源组成。通过...

    EXTJS讲解个人项目经历

    EXTJS支持数据绑定,能够轻松地将UI组件与后台数据源连接,实现数据的实时更新。 11. **AJAX和远程数据交互**: EXTJS通过Store、Proxy和Model等机制,方便地进行AJAX请求,实现与服务器端的数据交换。 EXTJS是...

Global site tag (gtag.js) - Google Analytics