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

Li0liQ · Accepted Answer · 2012-08-12 21:52:04Z

6

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

answered Aug 12, 2012 at 21:52

Li0liQ

11.3k38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edison Ouyang Over a year ago

I tried this, it seems working too: var getRowClassFunc = function(record, rowIndex, rowParams, store) { rowParams.tstyle += 'background-color:' + DEFAULT_ROW_COLOR + ';'; if (rowIndex == 1) { rowParams.tstyle += 'background-color:' + another_color + ';'; } };

Collectives™ on Stack Overflow

How to create dynamic CSS class in in extjs or javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related