ext grid滑鼠懸停和提示
{ //align : 'left', text : '公告標題', flex:5, dataIndex : 'title', renderer : function(value, metaData, record) { return '<a onmouseover=this.style.color="d54039" onmouseout=this.style.color="#000000" onclick=Msg_FN.queryMsg() style="cursor: pointer;">'+value+'</a>'; }
grid行提示:
grid.on('mouseover',function(e){//新增mouseover事件 var index = grid.getView().findRowIndex(e.getTarget());//根據mouse所在的target可以取到列的位置 if(index!==false){//當取到了正確的列時,(因為如果傳入的target列沒有取到的時候會返回false) var record = store.getAt(index);//把這列的record取出來 var str = Ext.encode(record.data);//組裝一個字串,這個需要你自己來完成,這兒我把他序列化 var rowEl = Ext.get(e.getTarget());//把target轉換成Ext.Element物件 rowEl.set({ 'ext:qtip':str //設定它的tip屬性 },false); } });
以上是轉載的,未經測試,下面是親測可用的程式碼:
Ext.override(Ext.grid.GridPanel, {
afterRender : Ext.Function.createSequence(Ext.grid.GridPanel.prototype.afterRender,
function() {
// 預設顯示提示
if (!this.cellTip) {
return;
}
var view = this.getView();
this.tip = new Ext.ToolTip({
target: view.el,
delegate : '.x-grid-cell-inner',
trackMouse: true,
renderTo: document.body,
ancor : 'top',
style : 'background-color: #FFFFCC;',
listeners: {
beforeshow: function updateTipBody(tip) {
//取cell的值
//fireFox tip.triggerElement.textContent
//IE tip.triggerElement.innerText
var tipText = (tip.triggerElement.innerText || tip.triggerElement.textContent);
if (Ext.isEmpty(tipText) || Ext.isEmpty(tipText.trim()) ) {
return false;
}
tip.update(tipText);
}
}
});
})
});