Extjs4 中 重写tooltip 自适应

   1.在extjs 4 中，TextFiled等组件并没有发现tooltip这个属性，这里就重写了一个方法，在Ext，form.TextFileld新增了一个tooltip属性，详细如下所示：

Ext.override(Ext.form.TextField, {
	tooltip:{text:"",title:""},
	onRender:function(ct, position){
		Ext.form.TextField.superclass.onRender.call(this, ct, position);
		if(this.tooltip.text && this.tooltip.text !=""){
			var t = this.tooltip.title;
			if(t && t != ""){
				new Ext.ToolTip({anchor: 'left',target:this.id,trackMouse:false,draggable:false,maxWidth:200,minWidth:100,title:this.tooltip.title,html:this.tooltip.text}).hide();
			}else{
				new Ext.ToolTip({anchor: 'left',target:this.id,trackMouse:false,draggable:false,maxWidth:200,minWidth:100,html:this.tooltip.text}).hide();
			}
			
		}
	}
});

 

2. Ext .ToolTip本身有默认的最大宽度，如果内容很多，要全部展示就必须自适应宽度，可以重写ToolTip的宽度属性值，如下

 

Ext.override(Ext.ToolTip, {
	maxWidth :0
});

 

 

 

 

下文转自：http://www.cnblogs.com/lipan/archive/2011/12/16/2286837.html

 

本篇介绍提示控件，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: '按钮上的自定义提示信息' });

 

效果展示：