extJs 4 настройка сетки - общая строка в конце

Question

Я хочу сетку с двумя столбцами, один для имени, а другой для процента. В последней строке будет «Total», как имя и общий процент, как «процент». Эта строка будет выглядеть иначе, чем другие строки. Пожалуйста, помогите мне, как я могу это сделать. Спасибо ..

Answer 1

Существует функция сетки, чтобы выполнить именно это. Он охватывает here в документах с некоторыми примерами того, как его использовать.

Вы также можете настроить стиль, предоставив свою собственную реализацию класса x-grid-row-summary в своем css.

EDIT

Вот некоторые примеры настройки стиля строки сводной, как вы можете видеть, что есть несколько способов, чтобы идти об этом. Осознайте, что итоговая строка не может ссылаться, пока не произойдет 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; 
}