1. 程式人生 > >ext grid滑鼠懸停和提示

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);
                    }
                }
            });
        })
});