ExtJS Grid Tooltip提示

    本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示,单元格提示,行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。

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

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

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

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

  1. //option 1    
  2. //========    
renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    

  1.     //build the qtip:    
  2.     var title = 'Details for ' + value + '-' + record.get('month') +    
  3.         '-' + record.get('year');    
  4.     var tip = record.get('sunday_events');    
  5.      
  6.     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';    
  7.      
  8.     //return the display text:    
  9.     var displayText = '< span style="color: #000;">' + value + '< /span>< br />' +    
  10.         record.get('sunday_events_short');    
  11.     return displayText;    
  12. };    
  13.      
  14. //option 2    
  15. //========    
  16. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
  17.     var qtip = '>';    
  18.     if(data >= 0){    
  19.         qtip = " qtip='yeah'/>";    
  20.         return '< span style="color:green;"' + qtip + data + '%< /span>';    
  21.     }else if(data <  0){    
  22.         qtip = " qtip='woops'/>";    
  23.         return '< span style="color:red;"' + qtip + data + '%< /span>';    
  24.     }    
  25.     return data;    
  26. };    
  27.      
  28. //option 3    
  29. //========    
  30. var qtipTpl = new Ext.XTemplate(    
  31.     '< h3>Phones:< /h3>',    
  32.     '< tpl for=".">',    
  33.     '< div>< i>{phoneType}:< /i> {phoneNumber}< /div>',    
  34.     '< /tpl>'    
  35. );    
  36.      
  37. renderer = function (data, metadata, record, rowIndex, columnIndex, store) {    
  38.      
  39.     // get data     
  40.     var data = record.data;    
  41.      
  42.     // convert phones to array (only once)     
  43.     data.phones = Ext.isArray(data.phones) ?    
  44.         data.phones :     
  45.         this.getPhones(data.phones);    
  46.      
  47.     // create tooltip     
  48.     var qtip = qtipTpl.apply(data.phones);    
  49.      
  50.     metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';    
  51.      
  52.     //return the display text:    
  53.     return data;        
  54. };   

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

  1. var myGrid = new Ext.grid.gridPanel(gridConfig);    
  2. myGrid.on('render'function(grid) {    
  3.     var store = grid.getStore();  // Capture the Store.    
  4.     
    var view = grid.getView();    // Capture the GridView.    

  1.     
  2.     myGrid.tip = new Ext.ToolTip({    
  3.         target: view.mainBody,    // The overall target element.    
  4.     
  5.         delegate: '.x-grid3-row'// Each grid row causes its own seperate show and hide.    
  6.     
  7.         trackMouse: true,         // Moving within the row should not hide the tip.    
  8.     
  9.         renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.    
  10.     
  11.         listeners: {              // Change content dynamically depending on which element triggered the show.    
  12.     
  13.             beforeshow: function updateTipBody(tip) {    
  14.                    var rowIndex = view.findRowIndex(tip.triggerElement);
     
                        if(!Ext.isEmpty(content)){
                            tip.body.dom.innerHTML = "提示信息";
                        }else{
                            return false; //停止执行,从而禁止显示Tip
                            tip.destroy();
                        }

  15.             }    
  16.         }    
  17.     });    
  18. });   

你可能感兴趣的:(PHP,ext)