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

方法一

使用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(); 必须要有