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.
   }
 };

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.
   }
 };

• javascript
• css
• extjs

1 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 + ';}'
);