CODEWITHSUNDEEP
javascriptcssextjs
Edison Ouyang
Edison Ouyang

Reputation: 53

How to create dynamic CSS class in in extjs or javascript

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

Upvotes: 5

Views: 6822

Answers (1)

Li0liQ
Li0liQ

Reputation: 11264

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

Upvotes: 6

Related Questions