ExtJS Grid Tooltipの3+1種実装方式まとめ

15073 ワード
PHP ext
本稿では,ExtJS Grid Tooltipのいくつかの実装方法をまとめた.ExtJS Grid Tooltipは、ヘッダーのヒント、セルのヒント、行のヒント、および自分で手動で追加することで完了します.本明細書では、公式FAQに記載されている説明を参照する.
 
ExtJS Grid Tooltip実装の1つ:ヘッダヒント
2.2ではColumnModelを設定します.tooltip,3.0はColumn.tooltipは次のとおりです.

 
    

  
  1. var grid = new Ext.grid.GridPanel({    
    2. 

  
  2.   columns:[    
    3. 

  
  3.      {header:'  ',dataIndex:'name',tooltip:'    '},     
    4. 

  
  4.      {header:'     -      < br/>  /  /   ', dataIndex:'sucRate',tooltip:'  /  /   '}     
    5. 

  
  5.   ]    
    6. 

  
  6. });  
    7.

ExtJS Grid Tooltip実装その2:セルヒント
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. 

  
  2.  //========     
    3. 

  
  3.  renderer = function (data, metadata, record, rowIndex, columnIndex, store) {     
    4. 

  
  4.      //build the qtip:     
    5. 

  
  5.      var title = 'Details for ' + value + '-' + record.get('month') +     
    6. 

  
  6.          '-' + record.get('year');     
    7. 

  
  7.      var tip = record.get('sunday_events');     
    8. 

  
  8.      
    9. 

  
  9.      metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';     
    10. 

  
  10.      
    11. 

  
  11.      //return the display text:     
    12. 

  
  12.      var displayText = '< span style="color: #000;">' + value + '< /span>< br />' +     
    13. 

  
  13.          record.get('sunday_events_short');     
    14. 

  
  14.      return displayText;     
    15. 

  
  15. };    
    16. 

  
  16.      
    17. 

  
  17.  //option 2     
    18. 

  
  18.  //========     
    19. 

  
  19.  renderer = function (data, metadata, record, rowIndex, columnIndex, store) {     
    20. 

  
  20.      var qtip = '>';     
    21. 

  
  21.      if(data >= 0){     
    22. 

  
  22.          qtip = " qtip='yeah'/>";     
    23. 

  
  23.          return '< span style="color:green;"' + qtip + data + '%< /span>';     
    24. 

  
  24.      }else if(data <  0){     
    25. 

  
  25.          qtip = " qtip='woops'/>";     
    26. 

  
  26.          return '< span style="color:red;"' + qtip + data + '%< /span>';     
    27. 

  
  27.     }    
    28. 

  
  28.      return data;     
    29. 

  
  29. };    
    30. 

  
  30.      
    31. 

  
  31.  //option 3     
    32. 

  
  32.  //========     
    33. 

  
  33.  var qtipTpl = new Ext.XTemplate(     
    34. 

  
  34.      '< h3>Phones:< /h3>',     
    35. 

  
  35.      '< tpl for=".">',     
    36. 

  
  36.      '< div>< i>{phoneType}:< /i> {phoneNumber}< /div>',     
    37. 

  
  37.      '< /tpl>'     
    38. 

  
  38. );    
    39. 

  
  39.      
    40. 

  
  40.  renderer = function (data, metadata, record, rowIndex, columnIndex, store) {     
    41. 

  
  41.      
    42. 

  
  42.      // get data      
    43. 

  
  43.      var data = record.data;     
    44. 

  
  44.      
    45. 

  
  45.      // convert phones to array (only once)      
    46. 

  
  46.     data.phones = Ext.isArray(data.phones) ?    
    47. 

  
  47.         data.phones :     
    48. 

  
  48.          this.getPhones(data.phones);     
    49. 

  
  49.      
    50. 

  
  50.      // create tooltip      
    51. 

  
  51.      var qtip = qtipTpl.apply(data.phones);     
    52. 

  
  52.      
    53. 

  
  53.      metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';     
    54. 

  
  54.      
    55. 

  
  55.      //return the display text:     
    56. 

  
  56.      return data;         
    57. 

  
  57. };   
    58.

2)Tooltipの使用
公式にも方法が示されています.
http://extjs.com/forum/showthread.php?p=112125#post112125
http://extjs.com/forum/showthread.php?t=55690
以上の方法は、1つのgrid内の要素にtooltipオブジェクトを共有させることです.一般的にrowtipに使われています
しかし3.0には、次のような方法があります.
ExtJS Grid Tooltip実装の3:行ヒントRowTip
ExtJS3.0新規メソッド、tooltipのdelegateを設定する

 
    

  
  1. var myGrid = new Ext.grid.gridPanel(gridConfig);    
    2. 

  
  2.  myGrid.on('render', function(grid) {     
    3. 

  
  3.      var store = grid.getStore();  // Capture the Store.     
    4. 

  
  4.     
    5. 

  
  5.      var view = grid.getView();    // Capture the GridView.     
    6. 

  
  6.     
    7. 

  
  7.      myGrid.tip = new Ext.ToolTip({     
    8. 

  
  8.          target: view.mainBody,    // The overall target element.     
    9. 

  
  9.     
    10. 

  
  10.          delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.     
    11. 

  
  11.     
    12. 

  
  12.          trackMouse: true,         // Moving within the row should not hide the tip.     
    13. 

  
  13.     
    14. 

  
  14.          renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.     
    15. 

  
  15.     
    16. 

  
  16.          listeners: {              // Change content dynamically depending on which element triggered the show.     
    17. 

  
  17.     
    18. 

  
  18.              beforeshow: function updateTipBody(tip) {     
    19. 

  
  19.                  var rowIndex = view.findRowIndex(tip.triggerElement);     
    20. 

  
  20.                  tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;     
    21. 

  
  21.             }    
    22. 

  
  22.         }    
    23. 

  
  23.     });    
    24. 

  
  24. });   
    25.

ExtJS Grid Tooltip実現の4:その他の方法?
GridViewまたはStoreのイベントをリスニングし、rowSelectorまたはgetRowメソッドで巡回し、自分でtooltipを追加します...この方式は無視してください
cloud9でテキストエディタがブラウザに反映されなくなった時
Pyqt-クイックスタート