extJs 4網格自定義 - 結束行總數

Question

我想要一個只有兩列的網格，一個是名稱，另一個是百分比。最後一行將以'總'作爲名稱，總百分比以'百分比'表示。此行的樣式不同於其他行。請指導我如何做到這一點。 謝謝..

Answer 1

有一個網格功能來完成。在文檔中涵蓋了here以及如何使用它的一些示例。

您還可以通過在您的css中提供您自己的x-grid-row-summary類實現來自定義樣式。

編輯

這裏的設置摘要行的風格，你可以看到有幾個方法可以去它的一些例子。要知道，直到viewready事件發生摘要行不能被引用，它不準備在afterrender事件，所以我把所有這種邏輯在viewready聽衆：

Ext.create('Ext.grid.Panel', { 
    features: [{ 
     ftype: 'summary' 
    }], 
    // other grid configs ... 
    listeners: { 
     viewready: function(grid) { 

      // get reference to the summary row 
      var summaryRow = grid.view.el.down('tr.x-grid-row-summary'); 

      // this will apply a css class to the row, in this example, 
      // I am applying the extjs grid header style to my summary row 
      summaryRow.addCls('x-grid-header-ct'); 

      // or, to do it all in javascript as you mentioned in the comment 
      // first you would create a style object, I took these style 
      // properties from the .x-grid-header-ct 
      aStyleObject = { 
       cursor: 'default', 
       zoom: 1, 
       padding: 0, 
       border: '1px solid #d0d0d0', 
       'border-bottom-color': '#c5c5c5', 
       'background-image': 'none', 
       'background-color': '#c5c5c5' 
      } 
      // then you pass the style object using setStyle 
      summaryRow.setStyle(aStyleObject); 

      // or you could set the style for each cell individually using 
      // addCls or setStyle: 
      Ext.Array.each(summaryRow.query('td'), function(td) { 
       var cell = Ext.get(td); 
       cell.addCls('some-class'); 
       // or 
       cell.setStyle(anotherStyleObject); 
      }); 
     } 
    } 
}); 

Answer 2

如果我們有摘要行（like this ），我們可以在特定頁面上使用CSS。

<style> 
.x-grid-row-summary .x-grid-cell{ 
    background-color: #f00 !important; 
    font-size: x-large !important; 
}