ExtJS 3 суммирование строк таблицы Grid

Рассматриваемая сегодня задача встречается очень часто: необходимо добавить в таблицу Grid дополнительную строку, которая будет выводить сумму значений из расположенных выше строк. В статье рассматривается ExtJS 3, в новой четвертой версии описанный функционал уже включен в ядро и хорошо документирован.


Создано несколько версий плагина GridSummary с различными доработками, они описаны здесь. Примеры использования плагина можно посмотреть в исходном варианте плагина здесь, но в проекте лучше использовать финальную на момент написания статьи версию. Да, для загрузки файлов необходимо зарегистрироваться на официальном форуме разработчкиков ExtJS (http://www.sencha.com/forum/), если вы до сих пор этого не сделали.

Ниже описан процесс подключения и конфигурирования плагина.

Первым шагом является подключение css и js файлов:

<link rel="stylesheet" href="gridsummary.css"/>
<script src='./js/gridsummary.js'></script>

Обратите внимание, что оба файла необходимо подключать после всех файлов самого ExtJS.

Вторым шагом является подключение плагина в теле функции onReady():

var summary = new Ext.ux.grid.GridSummary();
formDataGrid = new Ext.grid.EditorGridPanel({
  plugins: [ summary ],  store: myStore,
  cm: [
    {
      header: 'Компания',
     dataIndex: 'comp',
      summaryRenderer: function(){ return 'Всего: ';}
    }
    {
      header: 'Цена',
      dataIndex: 'price' ,
      summaryType: 'sum'
    },
    {
      header: 'Цифра какая-то',
      dataIndex: 'someInt',
      summaryType: 'avg'
    }
    //...
  ]

Как вы видите, все довольно просто. Вы указываете плагин summary и в описание ColumnModel добавляете описание параметров работы плагина. Основных параметра два - это summaryType, определяющий тип обработки данных (суммирование sum, вычисление среднего avg, подсчет количества строк count и др.) и summaryRenderer - функция-рендер для ячейки строки суммы, в случае указания  она определяет итоговый состав и стиль выводимых данных.

Например, для вывода положительной суммы зеленым цветом, а отрицательной красным, необходимо написать такой простенький рендер:

...
summaryRender: function pctChange(val) {
  if (val > 0) {
    return '<span style="color: green;">' + val + '%</span>';
  } else if(val < 0) {
    return '<span style="color: red;">' + val + '%</span>';
  }
  return val;
}
...

Успехов!