EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
由于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这个事件就行了!
效果如图!