my code


Customize headers, footer, and data rows of a grid
by bansteatt84

To customize the header of a grid, override buildPreHeaderRows, appending a new row to the parentElement object :

grid.buildPreHeaderRows = function(parentElement) {
  var headerRow = document.createElement('tr');
  ... customize row element

To modify data rows, override afterCreateDataRows and iterate over the data row elements. This example highlights specific rows by modifying

grid.afterCreateDataRows = function(parentElement, columns) {
  var dataRows = Ext.query('tr.dataRow', grid.tableBodyElement);
  for (var i=0, row; row = dataRows[i]; i++) {
      ... = ...

To modify single data cells, override afterCreateCellContent:

grid.afterCreateCellContent = function(row, column, cellElement) {
    var value = row[];
  if ( == 'rm.area' && value != '' && value < 100) {
      ... = 'Blue';

To build a custom footer row to precede the possible 'more records' message footer row, override buildPreFooterRows:

grid.buildPreFooterRows = function(parentElement) {
  var rowElement = document.createElement('tr');
  ... customize row element

Snippet options

Download: Download snippet as customize-headers-footer-and-data-rows-of-a-grid.txt.
Copy snippet: For this you need a free my code account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

Create a free my code account now.

my code is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.