Posts Tagged ‘JavaScript’

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; the weeks are starting Sundays:

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