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

ExtJs4 笔记（7） Ext.tip.ToolTip 提示本篇介绍提示控件，ExtJs支持两种方式定义提示，可以支持普通html元素和一般的ExtJs UI控件。一、基本提示 Ext.tip.ToolTip1.最简单的提示下面通过代码定义一个最简单的提示，首先在HTML加入一个div，我们要实现当鼠标移动到这个div上时，自动出现提示，如下是html内容：html?1普通提示接着在js中添加如下代码：Js?1234Ext.create(Ext.tip.ToolTip, target: tip1,html: 最简单的提示);OK,第一个提示已经添加成功，我们来预览一下效果：2.可关闭的提示html?1不自动隐藏Js?12345678Ext.create(Ext.tip.ToolTip, target: tip2,html: 请点击关闭按钮,title: 标题,autoHide: false,closable: true,draggable: true /可以允许被拖动);效果如下，鼠标移移出后提示不消失，单击叉即可关闭：3.Ajax提示，提示的内容来自服务端html?1 Ajax提示 Js?123456Ext.create(Ext.tip.ToolTip, target: tip3,width: 200,autoLoad: url: AjaxTipData, params: data: 测试参数 ,dismissDelay: 15000 /15秒后自动隐藏);在服务端通过MVC控制层action来返回提示内容，代码如下：c#?1234public ContentResult AjaxTipData(string data)return Content(这是Ajax提示信息：客户端参数： + data);效果：4.提示跟随鼠标移动html?1跟随鼠标Js?12345Ext.create(Ext.tip.ToolTip, target: tip4,html: 跟随鼠标的提示,trackMouse: true / 跟随鼠标移动);效果：5.带箭头的提示html?1指定提示方向Js?1234567Ext.create(Ext.tip.ToolTip, target: tip6,anchor: buttom, /指定箭头的指向 top,left,rightwidth: 120,anchorOffset: 50, /指定箭头的位置html: 带箭头的提示，并指定方向);效果：5.图文并茂的提示内容在提示内容中可以加入图片，超链接等以及如何html元素，还可以自定义提示标题：html?123456789101112 高级自定义提示项1提示项2提示项3提示项4Js?1234567891011121314151617181920Ext.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?1Ext.QuickTips.init();下面看看使用方式：html?12 快速提示 快速提示2 data-qtip:设置提示正文内容。data-qtitle:设置提示的标题。data-qwidth:设置提示的宽度。data-qalign:表示用提示的一个基准点，对应到原件的哪个基准点。例如：tl-br表示用提示的左上角，对应到原件的右下角。效果展示：三、在extjs控件上使用提示1.按钮上的快速提示首先也要运行如下代码：Js?1Ext.QuickTips.init();这样按钮配置项就可以使用“tooltip”了：Js?12345Ext.create(Ext.Button, renderTo: Ext.get(tipdiv),text: 按钮上的快速提示,tooltip: 提示信息);效果展示：2.按钮上的自定义提示Js?12345678910111213/按钮上的自定义提示Ext.create(Ext.Button, renderTo: Ext.get(tipdiv),text: 按钮上的自定义提示,id: bt1);Ext.create(Ext.tip.ToolTip, target: