ExtJs中 grid列表项 浮动提示信息

方法-

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;

            }

        }

    });

});

 

方法二

function formatQtip(data, metadata) {

   metadata.attr = 'ext:qtitle="" ext:qtip="'+data+'"';

  

   return data;

}

 

{id : 'shjclbx', header : '审核检查列表项', dataIndex : 'shjclbx', renderer: formatQtip }

 

方法三

重写grid，添加配置项

 

Tooltip: true,

minTipLength: 10,//设置配置项

 

cellTip: function() {

       //提示方式1：

       if(this.tooltip) {

         this.on('mouseover', function(e) {

             var target = e.getTarget();

             var text = target.innerHTML.trim();

             text = text.replace(' ','');

             if(target.childNodes.length < 2 && text.indexOf('<') == -1 && text.length > this.minTipLength)

                target.title = text;

          });

       }