how to show some text on mouseover extjs grid row
I am usig extjs 4.1. I went through a lot of threads explaining about tooltip on mouseover with dataview. However I just need to show some text like "double click on this row" on mouseover on any row of the grid... I have this function so far from another thread... but it's not working inside the grid
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
UPDATE - This is my grid
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' });
}
});
UPDATE - WORKING SOLUTION Add this to your listener on grid and it works
itemmouseenter: function (view, record, item) {
Ext.fly(item).set({ 'data-qtip': 'Hello' });
},
If this renderer is attached as each column renderer, tip should work. Verify if you have Ext.QuickTips.init() call somewhere in the code. Bellow is what I think is easier way to attach global tooltip to grid by attaching it to view.
grid.getView().getEl().set({ 'data-qtip': 'Double click me' });
Ext.QuickTips.init();
Working sample: http://jsfiddle.net/GCRA5/
链接地址: http://www.djcxy.com/p/67642.html上一篇: 如何设置extjs网格记录幻像为真