ExtJS Grid Tooltip的實現(xiàn)方式有哪些

本篇內(nèi)容主要講解“ExtJS Grid Tooltip的實現(xiàn)方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“ExtJS Grid Tooltip的實現(xiàn)方式有哪些”吧!

ExtJS Grid Tooltip實現(xiàn)之一：表頭提示

在2.2里面是設(shè)置ColumnModel.tooltip ,3.0則是Column. tooltip 如下:

var grid = new Ext.grid.GridPanel({      columns:[        {header:'名稱',dataIndex:'name',tooltip:'對象名稱'},        {header:'開始時間 - 結(jié)束時間 成功/失敗/成功率', dataIndex:'sucRate',tooltip:'成功/失敗/成功率'}      ]    });

ExtJS Grid Tooltip實現(xiàn)之二：單元格提示

1)使用Ext.QuickTips

在開始的時候就執(zhí)行Ext.QuickTips.init();

然后對需要提示的單元格,重寫renderer函數(shù),添加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

官方也已經(jīng)給出方法:

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實現(xiàn)之三：行提示 RowTip

ExtJS3.0新增的方法,設(shè)置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的實現(xiàn)方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！