ExtJs4 笔记(7) Ext.tip.ToolTip 提示

ExtJs4 笔记（7） Ext.tip.ToolTip 提示 本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。 一、基本提示 Ext.tip.ToolTip 1.最简单的提示 下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容： [html] ? 1     接着在js中添加如下代码： [Js] ? 1 2 3 4 Ext.create('Ext.tip.ToolTip', { target: 'tip1', html: '最简单的提示' });     OK,第一个提示已经添加成功，我们来预览一下效果： 2.可关闭的提示 [html] ? 1     [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     [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("这是Ajax提示信息：
客户端参数：" + data); }     效果： 4.提示跟随鼠标移动 [html] ? 1     [Js] ? 1 2 3 4 5 Ext.create('Ext.tip.ToolTip', { target: 'tip4', html: '跟随鼠标的提示', trackMouse: true // 跟随鼠标移动 });     效果： 5.带箭头的提示 [html] ? 1     [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     [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: '链接式标题', 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 示的提示" data-qtitle="标题"> 快速提示