Ext表格（Grid）上面的悬浮提示

最新推荐文章于 2022-05-20 10:35:35 发布

原创最新推荐文章于 2022-05-20 10:35:35 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #ViewUI

ExtJS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了三种在ExtJS Grid中实现悬浮提示的方法：通过Renderer设置单元格提示、引入特定JavaScript文件并配置、使用ExtGrid插件并指定依赖的JavaScript文件。

方法一

使用render

//鼠标放在Grid上面显示提示信息的实现方法
function formatQtip(data,metadata){ 
    var title ="";
    var tip =data; 
    metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';  
    return data;  
}

//修要配置在 Ext.grid.ColumnModel 创建每行记录的 renderer 属性上面

方法二

引入依赖的JavaScript文件（grid-extend-QuickTips.js），应注意引用的位置

<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext/ext-all.js"></script>
//要在ext-all.js之后引入
<script type="text/javascript" src="<%=request.getContextPath() %>/js/common/grid-extend-QuickTips.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext/ext-lang-zh_CN.js"></script>

方法三

使用 Ext Grid 的插件，需要引入所依赖的Javascript文件

<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext/ToolTipTarget.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ext/CellToolTips.js"></script>

之后进行配置要悬浮的列

var gridCellTips = new Ext.ux.plugins.grid.CellToolTips([{ 
			 field: 'remark', 
			 tpl:'{remark}'
	 }]);

最后以插件的方式集成到 Grid 中

plugins : [gridCellTips]

悬浮需要注意的 Ext.QuickTips.init(); 必须要有