EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。

Ext4JS官方API中给出的Ext.tip.ToolTip的用法如下：

grid.getView().on('render', function(view) {
    view.tip = Ext.create('Ext.tip.ToolTip', {
        // 所有的目标元素
        target: view.el,
        // 每个网格行导致其自己单独的显示和隐藏。
        delegate: view.itemSelector,
        // 在行上移动不能隐藏提示框
        trackMouse: true,
        // 立即呈现，tip.body可参照首秀前。
        renderTo: Ext.getBody(),
        listeners: {
            // 当元素被显示时动态改变内容.
            beforeshow: function updateTipBody(tip) {
                //给出特定格式的悬浮提示
                tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
            }
        }
    });
});

说明：用于实现当鼠标移动到每一行的时候给出特定格式的悬浮提示。

 

但是实际开发中需求往往不是这样。由于gridpanel的单元格里的文字太多时候，都由省略号代替，就想实现当鼠标悬浮在特定单元格上面的时候提示信息的方式显示当前单元格里面的内容，经过反复实验，终于搞定了！直接上代码：

 me.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
            if (view.tip == null) {  //这块判断很重要，不能每次都创建个tooltip，要不显示会有问题。
                view.tip = Ext.create('Ext.tip.ToolTip', {
                    // The overall target element.
                    target: view.el,
                    // Each grid row causes its own separate show and hide.
                    delegate: view.itemSelector,
                    // Moving within the row should not hide the tip.
                    //  trackMouse: false,
                    // Render immediately so that tip.body can be referenced prior to the first show.
                    renderTo: Ext.getBody()

                });
            };
            var gridColums = view.getGridColumns();
            var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
             view.el.clean();
             view.tip.update(record.data[column.dataIndex]);
                           
                
            
        });

 解释下：这里截取主要的代码，实际中，就是监听你的表格itemmouseenter这个事件就行了！

 

但是上面有一个问题，就是当鼠标移动到操作列的时候会显示空白内容的悬浮框 ，还有一方面就是我们只想在特定列的单元上面给出悬浮提示信息，我们可以使用如下写法：

grid.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
		view.el //获取代表此组件的顶层元素
		.clean(); //删除空的(Empty) 或者全是空格填充的文本节点
		if(view.tip != null){
		    view.tip.destroy();//销毁组件
		}
		//1.获取列号
		var columnIndex = e.getTarget(view.cellSelector).cellIndex;
		
                //当鼠标悬浮在特定列的单元格上面时给出悬浮提示框
		if(columnIndex == 4 ||columnIndex == 5 || columnIndex == 6){
			view.tip = Ext.create('Ext.tip.ToolTip', {
		        // 所有的目标元素
		        target: view.el,
		        // 每个网格行导致其自己单独的显示和隐藏。
		        delegate: view.itemSelector,
		        // 在行上移动不能隐藏提示框
		        trackMouse: true,
		        // 立即呈现，tip.body可参照首秀前。
		        renderTo: Ext.getBody()
		    });
			view.tip.on("beforeshow",function(tip){
				var gridColums = view.getGridColumns();
        		var column = gridColums[columnIndex];
                tip.update(record.data[column.dataIndex]);//获取鼠标悬浮单元格中的数据显示
			});
		}
    });