Posts Tagged ‘JS’

ExtJS4: grid row background colors

Monday, February 3rd, 2014

Today my task was to indicate weekends on a ExtJS grid.

This grid configuration utilizes .getRowClass() to attach a custom CSS class.

Column “weekday” is the integer index of the weekday
weeks are starting Sundays (that’s because of mySQL):

viewConfig: {
   
   getRowClass: function(record, index) {
      
      /* retrieve value from the record */
      var d = record.get('weekday');
      
      /* examine the value */
      if(d==1 || d==7) {
         
         /* return a CSS class */
         return 'x-grid-row-weekend';
      }
   }
}

And the matching styles, for the newly added class x-grid-row-weekend:

tr.x-grid-row-weekend td.x-grid-cell div.x-grid-cell-inner {
   background-color: #BCFBB5;
}

The result looks about like that:

ExtJS4 Row Colors

ExtJS4 Grid Row Background Colors