1.表头提示
在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:
- var grid = new Ext.grid.GridPanel({
- columns:[
- {header:'名称',dataIndex:'name',tooltip:'对象名称'},
- {header:'开始时间 - 结束时间 <br/>成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}
- ]
- });
2.单元格提示
1)使用Ext.QuickTips
在开始的时候就执行Ext.QuickTips.init();
然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。
这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip
代码:
-
-
- renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
-
- var title = 'Details for ' + value + '-' + record.get('month') +
- '-' + record.get('year');
- var tip = record.get('sunday_events');
-
- metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
-
-
- var displayText = '<span style="color: #000;">' + value + '</span><br />' +
- record.get('sunday_events_short');
- return displayText;
- };
-
-
-
- renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
- var qtip = '>';
- if(data >= 0){
- qtip = " qtip='yeah'/>";
- return '<span style="color:green;"' + qtip + data + '%</span>';
- }else if(data < 0){
- qtip = " qtip='woops'/>";
- return '<span style="color:red;"' + qtip + data + '%</span>';
- }
- return data;
- };
-
-
-
- var qtipTpl = new Ext.XTemplate(
- '<h3>Phones:</h3>',
- '<tpl for=".">',
- '<div><i>{phoneType}:</i> {phoneNumber}</div>',
- '</tpl>'
- );
-
- renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
-
-
- var data = record.data;
-
-
- data.phones = Ext.isArray(data.phones) ?
- data.phones :
- this.getPhones(data.phones);
-
-
- var qtip = qtipTpl.apply(data.phones);
-
- metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
-
-
- return data;
- };
2)使用ToolTip
官方也已经给出方法:
http://extjs.com/forum/showthread.php?p=112125#post112125
http://extjs.com/forum/showthread.php?t=55690
以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip
不过3.0有更好的方式,如下:
3.行提示 RowTip
ExtJS3.0新增的方法,设置tooltip的delegate
代码:
- var myGrid = new Ext.grid.gridPanel(gridConfig);
- myGrid.on('render', function(grid) {
- var store = grid.getStore();
-
- var view = grid.getView();
-
- myGrid.tip = new Ext.ToolTip({
- target: view.mainBody,
-
- delegate: '.x-grid3-row',
-
- trackMouse: true,
-
- renderTo: document.body,
-
- listeners: {
-
- beforeshow: function updateTipBody(tip) {
- var rowIndex = view.findRowIndex(tip.triggerElement);
- tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
- }
- }
- });
- });
4.其他方法
监听GridView或Store的事件,然后通过rowSelector或getRow方法来遍历,自己加tooltip... 这个方式请无视吧