ExtJS Grid tooltip的几种实现方式_雨儿

http://blog.sina.com.cn/u/1269150814

首页博文目录关于我

个人资料

雨儿

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：0

博客访问：7,748
关注人气：143
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

ExtJS Grid tooltip的几种实现方式

(2010-10-28 11:37:14)

标签：

代码

单元格

微软雅黑

复制

成功率

it

分类： ExtJS

1.表头提示

在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

Js代码 http://www.javaeye.com/images/icon_copy.gif

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

代码:

Js代码 http://www.javaeye.com/images/icon_copy.gif

//option 1
//========
renderer = function (data, metadata, record, rowIndex, columnIndex, store) {
//build the qtip:
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 + '"';
//return the display text:
var displayText = '<span style="color: #000;">' + value + '</span><br />' +
record.get('sunday_events_short');
return displayText;
};
//option 2
//========
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;
};
//option 3
//========
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) {
// get data
var data = record.data;
// convert phones to array (only once)
data.phones = Ext.isArray(data.phones) ?
data.phones :
this.getPhones(data.phones);
// create tooltip
var qtip = qtipTpl.apply(data.phones);
metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
//return the display text:
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

代码:

Js代码 http://www.javaeye.com/images/icon_copy.gif

var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
myGrid.tip = new Ext.ToolTip({
target: view.mainBody, // The overall target element.
delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
trackMouse: true, // Moving within the row should not hide the tip.
renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.
listeners: { // Change content dynamically depending on which element triggered the show.
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... 这个方式请无视吧

,renderer:function (data, metadata, record, rowIndex, columnIndex, store) {
metadata.attr ='ext:qtip ="双击记录，查看详细信息"'; return data; }

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：腾讯独家：中国足球50名留洋少年3年花3700万

后一篇：在Ext.Viewport中动态添加删除panel

新浪BLOG意见反馈留言板　欢迎批评指正