[ExtJS2.1教程-6]Tip(提示框)

最新推荐文章于 2019-05-27 14:37:57 发布

iteye_194

最新推荐文章于 2019-05-27 14:37:57 发布

阅读量335

点赞数

分类专栏： ext 文章标签： EXT 配置管理 HTML

本文链接：https://blog.csdn.net/iteye_194/article/details/81681817

版权

ext 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

[b]信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时，在页面上会出现一个对该元素说明并悬浮在屏幕上的提示区域，当鼠标移出该元素，则该提示区域会自动隐藏。[/b]
传统html方式我们采取title标签或者alt标签


<div title="hello" alt="hello">hello tip</div>
<IMG SRC="icon-warning.gif" ALT="aa">

[img]/upload/attachment/73547/decc4130-cf86-37d6-a1d4-caa2f52704c6.jpg[/img]

在我们使用的ExtJS中专门提供了一个Tip类来为我们提供这样的消息提示功能（Ext.Tip）。
Tip是继承于Panel的，配置选项中的closable:boolean表示可关闭，DefaultAlign对齐方式，maxWidth最大宽度等都是tip类中自己定义的。
Tip是可以通过配置选项方式进行创建。
我们来做一个提示框看看效果


<body>
		<div id="tip_test">提示框演示</div>
	</body>


Ext.onReady(function(){
	var tip = new Ext.Tip({
		title:"tip title",
		html:"tip content",
		width:400
	})
	var el = Ext.get("tip_test");
	tip.showAt([200,200]);
});

我们这里通过showAt方式进行渲染，这里的showAt方式和menu中的类似。
[img]/upload/attachment/73549/e0466999-846c-3326-8927-4ea3d14da72a.jpg[/img]
这里需要注意的是配置选项中的heigth不起作用，这一点与Panel不同。
我们也可以通过showBy( Mixed el, [String position] )方法渲染
其中第一个元素可以是el也可以是字符串，字符串内容一般是元素id。[String position]表示相对于指定元素的位置


Ext.onReady(function(){
	var tip = new Ext.Tip({
		title:"tip title",
		html:"tip content",
		width:400
	})
	var el = Ext.get("tip_test");
	tip.showBy(el);
});

[img]/upload/attachment/73556/4c80ae47-3189-3d2b-81a0-6c9631ebc33e.jpg[/img]
我们来指定一下位置


Ext.onReady(function(){
	var tip = new Ext.Tip({
		title:"tip title",
		html:"tip content",
		width:400
	})
	var el = Ext.get("tip_test");
	tip.showBy(el,"tl-br");
});

[img]/upload/attachment/73559/6a74551d-fe45-35ea-97c5-d29e5a5dda05.jpg[/img]
目前来看更像一个显示面板，并没有起到提示作用。
如果要起到提示作用，我们可以对相应元素中添加一些事件


Ext.onReady(function(){
	var tip = new Ext.Tip({
		title:"tip title",
		html:"tip content",
		width:400
	})
	var el = Ext.get("tip_test");

	el.on("mouseover",function(e){
		tip.showBy(el,"tl-br");
	});
	el.on("mouseout",function(e){
		tip.hide();
	});
});

这样虽然实现了提示框功能，不过每次在使用上非常繁琐。所以Ext提供了一个便捷的方式他是Ext.ToolTip，Ext.QuickTips方式。
ToolTip是Tip的子类，QuickTips是ToolTip的子类。
我们来使用一下ToolTip


	var ttip =new Ext.ToolTip({
		width:400,
		html:"toolTip content",
		target:"tip_test"
	});

我们通过target指定元素可以是id和el，无需为元素手动添加mouseover，mouseout事件。
其中trackMouse：boolean属性是表示是否跟随鼠标移动。

如果我们页面中有很多元素都需要进行提示框操作，这样即便是使用ToolTip方式也未免操作复杂，性能开销很大。

使用QuickTip进行全局提示框管理。
QuickTip需要进行全局初始化操作。


<body>
		<div id="tip_test" style="width:100">提示框演示</div>
		<div id="tip_test2" style="width:100">提示框演示2</div>
		<div id="tip_test3" style="width:100">提示框演示3</div>
	</body>


Ext.QuickTips.init();
	var qtip = Ext.QuickTips.getQuickTip();
	qtip.register({
		target:"tip_test",
		text:"你好"
	});

[img]/upload/attachment/73566/bff7ec18-b5a6-3374-a0e6-541140c3791e.jpg[/img]

如果我们注册多个


	Ext.QuickTips.init();
	var qtip = Ext.QuickTips.getQuickTip();
	qtip.register({
		target:"tip_test",
		text:"你好"
	});
	qtip.register({
		target:"tip_test2",
		text:"你好"
	});
	qtip.register({
		target:"tip_test3",
		text:"你好"
	});

Ext也为我们提供了一些和传统方法类似的方式，就是在html标签中加入ext:qtitle和ext:qtip标签


<body>
		<div id="tip_test" style="width:100" ext:qtitle="提示标题" ext:qtip="提示">提示框演示</div>
		<div id="tip_test2" style="width:100">提示框演示2</div>
		<div id="tip_test3" style="width:100">提示框演示3</div>
	</body>

[img]/upload/attachment/73573/4e347fd2-2d4d-3e7d-ac66-566089537a65.jpg[/img]
需要注意：即便是使用这种方式Ext.QuickTips.init();的初始化方法不能丢弃

在一些组件中也有一些关于tooltip和qtip的配置，可以参考Toolbar的讲解