ExtJS Grid Tooltip的实现方式有哪些

本篇内容主要讲解“ExtJS Grid Tooltip的实现方式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ExtJS Grid Tooltip的实现方式有哪些”吧!

ExtJS Grid Tooltip实现之一：表头提示

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

var grid = new Ext.grid.GridPanel({      columns:[        {header:'名称',dataIndex:'name',tooltip:'对象名称'},        {header:'开始时间 - 结束时间 成功/失败/成功率', dataIndex:'sucRate',tooltip:'成功/失败/成功率'}      ]    });

ExtJS Grid Tooltip实现之二：单元格提示

1)使用Ext.QuickTips

在开始的时候就执行Ext.QuickTips.init();

然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。

这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip

//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 = '' + value + '' +            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 ' + qtip + data + '%';        }else if(data <  0){            qtip = " qtip='woops'/>";            return '< span ' + qtip + data + '%';        }        return data;    };         //option 3    //========    var qtipTpl = new Ext.XTemplate(        'Phones:',        '',        '{phoneType}: {phoneNumber}',        ''    );         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有更好的方式,如下:

ExtJS Grid Tooltip实现之三：行提示 RowTip

ExtJS3.0新增的方法,设置tooltip的delegate

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

到此，相信大家对“ExtJS Grid Tooltip的实现方式有哪些”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！