View Full Version : Change CSS Class with Ext?

23 Feb 2011, 9:14 AM
Was wondering if it is possible currently with Ext to be able to change the style value for a certain class. E.g.

x-spreadsheet-row {
height: 20px;

Ext.changeCss('x-spreadsheet-row', 'height: 30px; background-color: #FF0000;'); // Example

x-spreadsheet-row {
height: 30px;
background-color: #FF0000;

Working on rewriting the ExtJS Grid to work better for the purpose I am using it. Making it more flexible and efficent for styling, resizing and merging cells.


23 Feb 2011, 10:01 AM
each component has the "style" attribute, where you can write css code as you wish.

23 Feb 2011, 11:11 AM

Have you looked at the Ext.util.CSS class? It has some methods like updateRule() that may work for you. I honestly have never used them, so I don't know if these methods do what you're looking for.

You might also look at the documentation for "document.styleSheets":
- https://developer.mozilla.org/en/DOM/document.styleSheets

Play around with that in Firebug and look at the properties/methods available to you. If the Ext.util.CSS class doesn't do exactly what you need, I'm sure you'll be able to build something pretty easily by piggybacking on document.styleSheets.

24 Feb 2011, 3:27 AM
Thanks for your reply

The Ext.util.CSS sounded interesting but turns out to be abit of a disapointment. All they are doing is dumping some <style> tags into the document head.

However I did manage to come across the document.styleSheets you mentioned before I had read this post. Which I think is the way I will go.

I am hoping that it will simplify resizing my grid without having to loop through every single row just to resize the column. I want to be able to add/update a CSS style for that column so that it updates all of them automatically. Which for a larger grid (spreadsheet) should be faster.

24 Feb 2011, 3:37 AM
I've never had the need to change a stylesheet dynamically. There were always better solutions than that.

Why would you want this?

24 Feb 2011, 5:49 AM
Myself and other developers in my team feel that it would be the best solution. We also know there are many solutions to this problem, but most involve looping through every row/column depending which you are resizing.

If you have a large grid to resize a column. Instead of looping through 50-100 rows, you are only making 1 change, since the rows and columns already have a class associated with the col/row

E.g. class = '.x-spreadsheet-row-2' or class = '.x-spreadsheet-col-6'

24 Feb 2011, 5:57 AM
Yes, I remember that ActiveWidgets Grid also used that approach.

Have you seen my TableGridView user extension? It doesn't need a stylesheet and can still resize a column in almost no time.

24 Feb 2011, 6:05 AM
Half the reason for using this approach wasnt just for the resizing. But I need to be able to control the styling and resizing of the grid. E.g. Bold Text, Alignment, Background Colour all from the inner cell the (div) within the td.

I have rewritten some of the grid so it can do this. The width being applied to the div inside rather than on the td.