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

 

评论

6 楼 zhuzhuhenzhencheng 2018-09-30  

密码是什么啊

5 楼 q6952592 2015-01-24  

好。解决了我的兼容模式下出现的问题。

4 楼 zjtao1217 2014-11-05  

Ext.ux.plugins.grid.CellToolTips  tpl怎么发送请求来获取显示数据

3 楼 dengxiaobao 2014-07-02  

学习了一下，谢谢分享！

2 楼 laodaobazi 2011-08-24  

junyan2579 写道

帅哥 解压密码给下好吗

O(∩_∩)O~  密码 jlee  不好意思  上传的时候忘记把密码去掉了

1 楼 junyan2579 2011-08-23  

帅哥 解压密码给下好吗