如何在鼠标悬停extjs网格行上显示一些文本
我很喜欢4.1。 我经历了大量的线程解释有关dataover的鼠标悬停工具提示。 不过,我只需要在网格的任何一行上显示一些文本,如“在该行上双击”鼠标悬停......我有这个功能到另一个线程为止......但它不在网格内工作
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
更新 - 这是我的网格
Ext.define('GridViewApp.view.GridViewApp', {
alias: 'widget.gridviewapp',
width: 800,
title: 'My Grid Panel',
grid: null,
store: null,
layout: {
type: 'anchor'
},
constructor: function () {
this.callParent(arguments);
var store = Ext.create('Ext.data.Store', {
storeId: 'myData',
scope: this,
fields: [
{ name: 'Q1', type: 'int' },
{ name: 'Q2', type: 'int' },
{ name: 'Q3', type: 'int' },
{ name: 'Q4', type: 'int' },
{ name: 'Q5', type: 'int' },
{ name: 'Improvements', type: 'string' },
{ name: 'Comments', type: 'string' }
],
sorters: [
{
//property: 'myData',
direct: 'ASC'
}
],
proxy: {
type: 'ajax',
scope: this,
url: 'GridView/writeRecord',
reader: {
type: 'json',
root: 'myTable',
idProperty: 'ID'
}
}
});
store.load();
this.grid = Ext.create('Ext.grid.Panel', {
title: 'GridView App',
store: this.store,
columns: [
{header: 'Q1', width: 100,
sortable: true, dataIndex: 'Q1'
},
{ header: 'Q2', width: 100,
sortable: true, dataIndex: 'Q2'
},
{ header: 'Q3', width: 100,
sortable: true, dataIndex: 'Q3'
},
{ header: 'Q4', width: 100,
sortable: true, dataIndex: 'Q4'
},
{ header: 'Improvements', width: 200,
sortable: true, dataIndex: 'Improvements'
},
{ header: 'Comments', width: 200,
sortable: true, dataIndex: 'Comments'
}
],
stripeRows: true,
width: 800,
renderTo: Ext.getBody()
});
this.add(this.grid);
this.grid.getView().getEl().set({ 'data-qtip': 'Double click me' });
}
});
更新 - 工作解决方案将这添加到您的网格侦听器,它的工作原理
itemmouseenter: function (view, record, item) {
Ext.fly(item).set({ 'data-qtip': 'Hello' });
},
如果此渲染器作为每个列渲染器附加,则提示应该起作用。 验证代码中是否有Ext.QuickTips.init()
调用。 贝娄是我认为更容易的方法来将全局工具提示附加到网格,方法是将其附加到网格上。
grid.getView().getEl().set({ 'data-qtip': 'Double click me' });
Ext.QuickTips.init();
工作示例:http://jsfiddle.net/GCRA5/
链接地址: http://www.djcxy.com/p/67641.html