Ext.tip.ToolTip 气泡提示

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

一、基本提示 Ext.tip.ToolTip

1.最简单的提示

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

[html]

1

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

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

[Js]

1

2

3

4

Ext.create('Ext.tip.ToolTip', {

    target: 'tip1',

    html: '最简单的提示'

});

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

2.可关闭的提示

[html]

1

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

[Js]

1

2

3

4

5

6

7

8

Ext.create('Ext.tip.ToolTip', {

    target: 'tip2',

    html: '请点击关闭按钮',

    title: '标题',

    autoHide: false,

    closable: true,

    draggable: true             //可以允许被拖动

});

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

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

[html]

1

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

[Js]

1

2

3

4

5

6

Ext.create('Ext.tip.ToolTip', {

    target: 'tip3',

    width: 200,

    autoLoad: { url: 'AjaxTipData', params: { data: "测试参数"} },

    dismissDelay: 15000         //15秒后自动隐藏

});

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

[c#]

1

2

3

4

public ContentResult AjaxTipData(string data)

{

    return Content("<font color='red'>这是Ajax提示信息：</font><br>客户端参数：" + data);

}

效果：

4.提示跟随鼠标移动

[html]

1

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

[Js]

1

2

3

4

5

Ext.create('Ext.tip.ToolTip', {

    target: 'tip4',

    html: '跟随鼠标的提示',

    trackMouse: true            //  跟随鼠标移动

});

效果：

5.带箭头的提示

[html]

1

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

[Js]

1

2

3

4

5

6

7

Ext.create('Ext.tip.ToolTip', {

    target: 'tip6',

    anchor: 'buttom',           //指定箭头的指向 top,left,right

    width: 120,

    anchorOffset: 50,           //指定箭头的位置

    html: '带箭头的提示，并指定方向'

});

效果：

5.图文并茂的提示内容

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

[html]

1

2

3

4

5

6

7

8

9

10

11

12

<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]

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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]

1

Ext.QuickTips.init();

下面看看使用方式：

[html]

1

2

<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]

1

Ext.QuickTips.init();

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

[Js]

1

2

3

4

5

Ext.create("Ext.Button", {

    renderTo: Ext.get("tipdiv"),

    text: "按钮上的快速提示",

    tooltip: "提示信息"

});

效果展示：

2.按钮上的自定义提示

[Js]

1

2

3

4

5

6

7

8

9

10

11

12

13

//按钮上的自定义提示

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: '按钮上的自定义提示信息'

});

效果展示：

本篇转自https://www.cnblogs.com/lipan/archive/2011/12/16/2286837.html