How to create dynamic CSS class in in extjs or javascript

Question

is it possible to create dynamic css class for the GridView in extjs without hard coding the css class inside style sheet, for example

 DEFAULT_ROW_COLOR = '#E0E0E0';
 ...
 var gridview = new Ext.grid.GroupingView({
  forceFit : forceFit,
  hideGroupedColumn : true,
  showGroupName : false,
  groupTextTpl: '{text}',
  getRowClass : getRowClassFunc
 });

 var getRowClassFunc = function(record, rowIndex, rowParams, store) {
   if (rowIndex == 1 ) {
     // create a dynamic class based on DEFAULT_ROW_COLOR for background color
   }  
   if (rowIndex > 1)  {
     // create a dynamic class for darker color for the background.
   }
 };

Answer 1

You could use Ext.util.CSS.createStyleSheet (available both in ExtJS 3.4 and ExtJS 4.1) for that exact purpose.

Sample:

Ext.util.CSS.createStyleSheet(
    '.some-row-class {background-color:' + DEFAULT_ROW_COLOR + ';}'
);