`
liss
  • 浏览: 842636 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>  就可以看到下面的效果:

 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/foamflower/archive/2009/06/28/4304675.aspx

分享到:
评论
1 楼 maidou80 2011-10-26  
收cang了  谢谢

相关推荐

    ExtJS ToolTip功能

    本文将详细介绍如何在ExtJS中实现ToolTip,并通过一个具体的示例来展示其实现过程。 #### 示例概述 本示例展示了一个名为`WebApp.view.tip.ToolTip`的自定义组件,该组件继承自`Ext.container.Container`。此组件...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    extjs-Ext.ux.form.LovCombo下拉框

    综上所述,`Ext.ux.form.LovCombo`是EXTJS中用于创建具有多选功能和良好浏览器兼容性的下拉框组件。它解决了火狐浏览器上的兼容性问题,并提供了丰富的定制选项,适用于各种业务场景。开发者可以利用它来创建更复杂...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    总结来说,通过结合Ext.MessageBox和Ext.LoadMask组件,我们可以有效地实现一个在用户进行Ajax请求时提供等待提示的效果。这一实现过程涉及了ExtJs框架中的一些核心组件使用方法,需要开发者具备一定的ExtJs框架使用...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    总的来说,ExtJS 4.0中对RowEditing插件的重构旨在提供更高效、易用且可靠的表格数据编辑功能,同时通过源码分析和文档学习,开发者可以更好地利用这个插件来提升其应用程序的用户体验。尽管具体的改进内容需要通过...

    ExtJs 带清空功能的日期组件

    在ExtJs框架中,日期组件(DateField)是用于用户输入日期的常见控件。然而,标准的ExtJs DateField并未内置...通过深入理解ExtJs的组件体系和MVC模式,我们可以灵活地扩展和定制任何控件,以满足不同业务场景的需求。

    Ext.Ajax.request2.x实现同步请求

    总结来说,`Ext.Ajax.request`在EXTJS中是进行Ajax通信的关键工具,通过调整其配置参数,我们可以实现同步请求。尽管同步请求有其应用场景,但应谨慎使用,以避免对用户体验造成负面影响。在EXTJS 2.x这样的老版本中...

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...

    Ext Extjs 禁止文本和日期编辑

    在Ext JS这个强大的JavaScript框架中,开发者经常使用各种组件来构建富客户端应用,其中包括TextField(文本字段)和DatePicker(日期选择器)。有时,我们可能需要根据应用需求在运行时禁用这些组件的编辑功能,...

    Ext.ux.UploadDialog.zip

    通过"UploadDialog"这个压缩包,你可以获取到EXTjs的上传对话框组件,将其整合到你的项目中,快速实现文件上传功能,提升应用的交互性和功能完整性。记得在实际使用时,根据项目的具体需求对UploadDialog进行适当的...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    ComboboxTree是ExtJS中的一个自定义组件,它扩展了标准的ComboBox组件,增加了树状结构的功能。用户可以在下拉列表中看到一个树形结构,逐级展开节点,选择需要的项。这种组件特别适合于那些需要展示层级关系且允许...

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

    版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档是为中文用户特别准备的,帮助他们更好地理解和使用ExtJS 3.3的各种...

    ExtJS 3.4.0中的 ext.jsb2 文件

    ExtJS 是一个流行的JavaScript库,专门用于构建富客户端应用程序,提供了丰富的组件和强大的数据绑定功能。在3.4.0版本中,`ext.jsb2` 文件是一个关键组成部分,它对于理解和开发基于ExtJS的应用程序至关重要。这个...

    extjs4.1-ux.rar

    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包

    - 在早期版本中,ExtJS的包管理系统相对简单,主要是通过引入不同的JavaScript文件来组织和使用组件。 - 使用时,开发者需要根据项目需求选择合适的组件和资源,然后在HTML文件中引入对应的JavaScript和CSS文件。 ...

    Ext.get与Ext.fly 的区别

    在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext...总而言之,`Ext.get`和`Ext.fly`是EXTJS中两个关键的DOM操作工具,它们在功能和性能上各有侧重。开发者应根据具体需求选择合适的方法,以实现更高效的代码编写。

    Ext组件描述,各个组件含义

    - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的基本容器。它可以用来构建更复杂的用户界面组件。 - **主要用途**:作为其他复杂组件的基础结构,如容器或面板等。...

    Ext.data.Store的基本用法

    创建实例时需要指定其配置项,主要包括`proxy`和`reader`,这两个配置项分别用来定义数据来源以及如何解析这些数据。 ```javascript var data = [ ['boy', 0], ['girl', 1] ]; var store = new Ext.data.Store({...

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....

Global site tag (gtag.js) - Google Analytics