本篇介绍提示控件,ExtJs支持两种方式定义提示,可以支持普通html元素和一般的ExtJs UI控件。

一、基本提示 Ext.tip.ToolTip

1.最简单的提示

下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:

[html]

<div id="tip1" class="TipDiv">普通提示</div>

接着在js中添加如下代码:

[Js]

    Ext.create('Ext.tip.ToolTip', {
target: 'tip1',
html: '最简单的提示'
});

OK,第一个提示已经添加成功,我们来预览一下效果:

2.可关闭的提示

[html]

<div id="tip2" class="TipDiv">不自动隐藏</div>

[Js]

    Ext.create('Ext.tip.ToolTip', {
target: 'tip2',
html: '请点击关闭按钮',
title: '标题',
autoHide: false,
closable: true,
draggable: true //可以允许被拖动
});

效果如下,鼠标移移出后提示不消失,单击叉即可关闭:

3.Ajax提示,提示的内容来自服务端

[html]

<div id="tip3" class="TipDiv"> Ajax提示</div>

[Js]

    Ext.create('Ext.tip.ToolTip', {
target: 'tip3',
width: 200,
autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} },
dismissDelay: 15000 //15秒后自动隐藏
});

在服务端通过MVC控制层action来返回提示内容,代码如下:

[c#]

        public ContentResult AjaxTipData(string data)
{
return Content("<font color='red'>这是Ajax提示信息:</font><br>客户端参数:" + data);
}

效果:

4.提示跟随鼠标移动

[html]

<div id="tip4" class="TipDiv">跟随鼠标</div>

[Js]

    Ext.create('Ext.tip.ToolTip', {
target: 'tip4',
html: '跟随鼠标的提示',
trackMouse: true // 跟随鼠标移动
});

效果:

5.带箭头的提示

[html]

<div id="tip6" class="TipDiv">指定提示方向</div>

[Js]

    Ext.create('Ext.tip.ToolTip', {
target: 'tip6',
anchor: 'buttom', //指定箭头的指向 top,left,right
width: 120,
anchorOffset: 50, //指定箭头的位置
html: '带箭头的提示,并指定方向'
});

效果:

5.图文并茂的提示内容

在提示内容中可以加入图片,超链接等以及如何html元素,还可以自定义提示标题:

[html]

<div id="tip7" class="TipDiv"> 高级自定义</div>
<div style="display:none;">
<div id="tipContent">
<ul>
<li>提示项1</li>
<li>提示项2</li>
<li>提示项3</li>
<li>提示项4</li>
</ul>
<img src="http://www.cnblogs.com/Img/Ext/house.jpg" alt="图片" />
</div>
</div>

[Js]

    Ext.create('Ext.tip.ToolTip', {
title: '<a href="#">链接式标题</a>',
id: 'toolTip7',
target: 'tip7',
anchor: 'left',
html: null,
width: 415,
autoHide: false,
closable: true,
contentEl: 'tipContent', //用id为tipContent的html标签内容作为提示信息
listeners: {
'render': function () {
this.header.on('click', function (e) {
e.stopEvent();
Ext.Msg.alert('提示', '标题被点击.');
Ext.getCmp('toolTip7').hide();
}, this, { delegate: 'a' });
}
}
});

效果:

二、快速提示 Ext.tip.QuickTip

快速提示通过在html上添加特定的属性就可以体现出来,比较方便,只需要在代码里面通过如下方式初始化:

[Js]

Ext.QuickTips.init();

下面看看使用方式:

[html]

<div id="tip5" class="TipDiv" data-qtip="用HTML属性表示的提示" data-qtitle="标题"> 快速提示</div>
<div id="tip52" class="TipDiv" data-qtip="设置了宽度、位置的快速提示" data-qwidth="400" data-qalign="tl-br"> 快速提示2</div>

data-qtip:设置提示正文内容。
data-qtitle:设置提示的标题。
data-qwidth:设置提示的宽度。
data-qalign:表示用提示的一个基准点,对应到原件的哪个基准点。例如:tl-br表示用提示的左上角,对应到原件的右下角。

效果展示:

三、在extjs控件上使用提示

1.按钮上的快速提示

首先也要运行如下代码:

[Js]

 Ext.QuickTips.init();

这样按钮配置项就可以使用“tooltip”了:

[Js]

    Ext.create("Ext.Button", {
renderTo: Ext.get("tipdiv"),
text: "按钮上的快速提示",
tooltip: "提示信息"
});

效果展示:

2.按钮上的自定义提示

[Js]

    //按钮上的自定义提示
Ext.create("Ext.Button", {
renderTo: Ext.get("tipdiv"),
text: "按钮上的自定义提示",
id: "bt1"
});
Ext.create('Ext.tip.ToolTip', {
target: 'bt1',
anchor: 'buttom',
width: 120,
anchorOffset: 50,
html: '按钮上的自定义提示信息'
});

效果展示:

ExtJs4 笔记(7) Ext.tip.ToolTip 提示的更多相关文章

  1. [转载]ExtJs4 笔记(7) Ext.tip.ToolTip 提示

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. Extjs4.2 tooltip 提示宽度问题解决

    在Extjs4.2 的tooltip 提示,宽度被限制在了40px,感觉非常别扭,是个BUG,解决的方法,在ext-all-debug.js或ext-all.js中,找到例如以下的代码: Ext.de ...

  3. [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. ExtJs4 笔记(4) Ext.XTemplate 模板

    ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...

  5. [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  6. ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...

  7. ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...

  8. [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  9. [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

随机推荐

  1. 10个SQL注入工具(转载)

    众所周知,SQL注入攻击是最为常见的Web应用程序攻击技术.同时SQL注入攻击所带来的安全破坏也是不可弥补的.以下罗列的10款SQL注入工具可帮助管理员及时检测存在的漏洞. BSQL Hacker 1 ...

  2. DP之花店橱窗布置

    题目:https://www.smartoj.com/p/1286 分析:花瓶是有序的,花也是有序的,这就保证了有序性,从而满足子解的全局最优,和无后效性.假设dp[i][j]表示前i 朵花,放在前j ...

  3. Python 第七篇:socket编程

    一:socket基础: 1.1:Socket基础: socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,对于文件用[打开][读写][关闭]模式来操作.socket就是该模 ...

  4. 1 #安装php

    #安装php #备注:php5..3以后的版本源码不需要打php-fpm补丁,该补丁已经集成进5..3中强制启用fastcgi. [root@dba01 nginx-]# cd [root@dba01 ...

  5. 说说关于php内置函数curl_init()

    昨天在我本地的项目,调试时碰到无法识别curl_init()方法,网上查了查才知道是我本地的php.ini文件里没加载上,完了把extension=php_curl.dll前面的;去掉后就好了,注意一 ...

  6. 柔性数组-读《深度探索C++对象模型》有感

    最近在看<深度探索C++对象模型>,对于Struct的用法中,发现有一些地方值得我们借鉴的地方,特此和大家分享一下,此间内容包含了网上搜集的一些资料,同时感谢提供这些信息的作者. 原文如下 ...

  7. Python中使用Flask、MongoDB搭建简易图片服务器

    主要介绍了Python中使用Flask.MongoDB搭建简易图片服务器,本文是一个详细完整的教程,需要的朋友可以参考下 1.前期准备 通过 pip 或 easy_install 安装了 pymong ...

  8. 基于visual Studio2013解决面试题之1405归并排序

     题目

  9. IntelliJ Idea 经常使用快捷键列表

    Alt+回车 导入包,自己主动修正Ctrl+N   查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包Alt+Insert 生成代码(如 ...

  10. Ansi,UTF8,Unicode,ASCII编码的差别

    近日须要不同的编码,关于上述编码,一直迷迷糊糊,查了些资料,总算大致了解了,以下全是从网上搜来的: 1.  ASCII和Ansi编码    字符内码(charcter code)指的是用来代表字符的内 ...