Ext.js实现ToolTip提示

1. 需求背景

在项目背景中,填表格时,需要对所填字段做出要点提示,要求在鼠标移入提示png图标时弹出提示弹出层,任意点则关闭弹出层。

2. 实现效果

Ext.js实现ToolTip提示_第1张图片

3. 代码实现

{
	xtype: 'image',
	id: "generalCmdTip",
	src: "../../../../../../../aiots/static/img/icon/tip.png",
	colspan: 1,
	width: 18,
	margin: '0 10 0 10',
	listeners: {
		afterrender: function (c) {
			Ext.create('Ext.tip.ToolTip', {
				target: c.getEl(),
				autoHide: false, 
				html: "通用指令使用说明:
"
+ "遵循JT701标准协议格式(指令,参数1,参数2,...),如
"
+ "开启不休眠模式:(P54,1,1)
"
+ "关闭不休眠模式:(P54,1,0)
"
}); }, el: { click: function () { //window.open("../Desktop"); } } } }

4. 参考资料

参考资料:

药到病除-Extjs6图片控件功能扩展,增加tip和点击事件
lipan-ExtJs4 笔记(7) Ext.tip.ToolTip 提示

你可能感兴趣的:(前端)