View Full Version : Adding CSS rules through JavaScript, isn't this bad?

20 Feb 2007, 11:40 PM
The following is an excerpt from new paging grid example:

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
css: 'white-space:normal;'

In that code, as of Ext 1.0, we can add CSS rules to our columnd definitions from JavaScript. But, isn't that a behaviour that must be avoided? Because whenever we (or any designer on our team who does not know JavaScript but CSS) wanted to change the appearance of something, the JavaScript code must be modified. Adding classes to our JavaScript generated code is OK, we can hook these classes from CSS and give styles for them. But adding *directly* CSS rules inside JavaScript is evil in my opinion. Everyone wants new features to be added to Ext but oddly I want this feature to be removed for the sake of Web Standards :)

20 Feb 2007, 11:42 PM
You don't have to use it if you don't want to. :) The thing is, many people are creating grid "generators" in php and other languages and it is much easier to generate everything in 1 spot. For them, it will be a central location.

20 Feb 2007, 11:44 PM
Sure I won't (at least I hope) :) But I just wanted that for preventing any feature headaches (especially for newbies who may put lots of presentational data to JS)

Anyway, you are the boss, keep up the great work :)

21 Feb 2007, 12:40 AM
OK, could we have a "cls" attribute similar to that used by DomHelper which adds a className to the column? Then presentational instructions will still be in a seperate CSS file.