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

ExtJS Tooltipst和QuickTips浮动信息 示例

阅读更多

ExtJS  Tooltipst和QuickTips浮动信息 示例

Tooltipst 示例:

Ext.onReady(function() {

 var temp = new Ext.Panel({
    renderTo : document.body,
    // id : 'ajax-tip',
    layout : "table",
    layoutConfig : {
     columns : 1
    },
    items : [{
       xtype : 'panel',
       id : 'tip1',
       html : 'Label 1'

      }, {
       xtype : 'panel',
       id : 'ajax-tip',
       html : 'Label 2'

      }, {
       xtype : 'panel',
       id : 'tip2',
       html : 'Label 3'

      }, {
       xtype : 'panel',
       id : 'track-tip',
       html : 'Label 4'

      }]
   });
 new Ext.ToolTip({
    target : 'tip1',
    html : 'A very simple tooltip'
   });
 new Ext.ToolTip({
  target : 'ajax-tip',
  width : 200,
  autoLoad : {
   url : '../../../index.jsp'
  },
  dismissDelay : 15000
   // auto hide after 15 seconds
  });

 new Ext.ToolTip({
    target : 'tip2',
    html : 'Click the X to close me',
    title : 'My Tip Title',
    autoHide : false,
    closable : true,
    draggable : true
   });

 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
   });
 Ext.QuickTips.init();

});

 

QuickTips 示例:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<body >例子:<br>
<a href="http://extjs.com" ext:qtip="ExtJS官方网站">ExtJS</a>
<input type="text" ext:qtip="请填写 ..."></input>

<script type="text/javascript" charset="utf-8">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    });       
</script>
</body>
</html>

分享到:
评论

相关推荐

    深入浅出extjs(第二版)示例源码光盘

    深入浅出extjs(第二版)示例源码光盘,包含3.0.0,3.1.1,3.2.0

    Extjs6 最简单的示例java版

    Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版Extjs6 最简单的示例java版

    EXTJS net 增删改查示例

    EXTJS 是一个强大的JavaScript前端框架,专用于构建富互联网...通过深入理解EXTJS的这些核心概念和技术,开发者可以高效地构建出功能完备且用户体验优秀的Web应用,实现与.NET后端的无缝集成,完成各种复杂的业务需求。

    EXTJS插件风格的表格合并示例.rar

    一款基于EXTJS插件风格的表格合并示例,界面不用说了,使用EXT本身的界面风格,很漂亮,EXT功能很强大,这个表格合并功能只是其中一个比较实用的功能,这个例子带给大家,希望通过这个例子你会对EXT有更多的了解。

    EXTJS 折线 chart action 代码示例

    本篇文章将深入探讨EXTJS折线chart与action交互的代码示例,以及如何通过远程和本地加载数据。 首先,让我们了解EXTJS折线chart的基本结构。创建一个折线图通常涉及到以下几个步骤: 1. 定义store:存储图表所需的...

    Extjs6示例中文版

    综上所述,《Extjs6示例中文版》不仅提供了详细的ExtJS6教程,还分享了作者的实践经验和个人见解,这对于想要深入学习和掌握ExtJS6的开发者来说是一份宝贵的资源。通过学习本书,读者不仅可以了解ExtJS6的基础知识和...

    Extjs Tree + JSON + Struts2 示例源代码

    这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回数据。 1. **ExtJS Tree**: ExtJS 是一个强大的JavaScript库,专门用于创建富客户端应用程序。其中的Tree组件...

    EXTJS 上传组件及示例

    本篇文章将详细解析EXTJS中的上传组件及其示例,帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`(也称为FileField或UploadField)实现。这个组件提供了一个表单字段,用户...

    ExtJS静态使用示例

    ExtJS是一种广泛应用于Web开发的...总的来说,"ExtJS静态使用示例"提供了一个学习和实践ExtJS基础功能的机会,通过Grid、Panel和Tree的使用,可以帮助开发者掌握如何在Web应用中构建交互性和功能性丰富的用户界面。

    extjs3.0开发包含示例api

    这个开发包包含了EXTJS 3.0的核心API、示例代码和源文件,是学习和开发EXTJS应用程序的重要资源。 一、EXTJS 3.0 API EXTJS 3.0的API是其核心组成部分,提供了大量的可重用组件,如表格、面板、窗口、菜单、按钮等...

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

    殷良胜 ExtJS与.NET结合开发实例提供的示例(包括示例数据库、皮肤文件、EXT、和相关DLL) 他的博客:http://www.cnblogs.com/mogen_yin Ext2.2学习系列:ExtJS与.NET结合开发实例--全部Ext2.2示例--索引贴 ...

    Extjs配置文件和示例文件

    本压缩包中的“Extjs配置文件和示例文件”是针对ExtJS进行深入学习和实践的重要资源。 首先,我们要理解`配置文件`在ExtJS中的作用。在ExtJS中,配置文件主要用于设定组件的行为、样式以及应用程序的整体结构。这些...

    extjs3.x 官方示例以及chm版api

    综上所述,"extjs3.x 官方示例以及chm版api"为开发者提供了一套完整的ExtJS 3.x 学习和开发资源,包括实际的示例应用和详细的API文档,是深入理解和掌握这一版本ExtJS的关键工具。通过学习和实践,开发者可以高效地...

    extjs6.6项目示例

    ExtJS 是一个强大的JavaScript ...这个示例项目对于初学者和经验丰富的ExtJS开发者来说都是宝贵的资源,它提供了实践和学习ExtJS的最佳途径。通过实际操作和研究,可以加深对框架的理解,提升开发Web应用程序的能力。

    Extjs增删改查示例

    在这个"Extjs增删改查示例"中,我们将探讨如何使用ExtJS与etmvc(一个基于ExtJS的MVC模式扩展)和MySQL数据库配合,实现Web应用中的基本数据操作。 首先,ExtJS的MVC模式是其架构的核心部分,它将应用程序分为Model...

    自己写的ExtJS4.0用MVC的示例

    在“TryMyMFC.sln”文件中,这是一个Visual Studio解决方案文件,可能包含了项目的配置信息和依赖关系。而“TryMyMFC.suo”文件则是Visual Studio用户选项文件,存储了个人的工作区设置和调试信息,对理解示例代码...

    extjs后台交互完整示例

    在"extjs后台交互完整示例"中,我们可以看到如何使用ExtJS与服务器进行数据交换,这对于创建动态和数据驱动的应用程序至关重要。 首先,我们要理解ExtJS的数据模型和存储机制。它提供了Store对象,作为客户端数据的...

    Extjs版本60一些简单使用示例以及效果

    Ext.js(版本6.0)一些简单使用示例以及效果

    ExtJs+Servlet+Json简单示例

    用Ext写一个登陆界面,登陆完后进入一个...用Servlet发送请求,Json数据也是JS通过Servlet请求从数据库中读取显示在Grid表格中。例子比较简单,但方法很明朗。 代码没有经过处理,可能有些乱,但思路还是比较清晰的。

    ExtJS日期时间选择控件示例

    ExtJS日期时间控件。详细信息参照我的博文: http://blog.csdn.net/lvye1221/article/details/10225941 这是我在 apache 目录下部署了测试示例。将附件中的测试用例,按照以下方式部署好,即可成功访问: apache ...

Global site tag (gtag.js) - Google Analytics