ExtJS: Put size/margin/padding in Component or External .css File?`

Question

Is there a 'best practice' when it comes to specifying size/margin/padding info in components (i.e., adding it programmattically via JavaScript) vs. putting it in external CSS files?

I've gotten into the habit of doing the former. But I can see some people arguing for putting that stuff in an external CSS file so that you could, in theory, modify layouts (size/margin/padding) in different themes.

What do others think? Is there an established best practice?

Thanks.

Answer 1

The best approach I find is to assign classes to all your components and style them in your CSS files. For example...

var styledPanel = new Ext.Panel({
    cls: 'panel-styled',
    items: [ ]
});

And then have a CSS rule to style it...

.styled-panel {
    background-color: #e7e7e7;
}

Obviously, this allows you to group component styles together as well.

As a side note, I usually use the bodyStyle property to add formatting which isn't likely to change, for example... most Windows need padding and this isn't likely to change frequently so I stick that in the bodyStyle property.

var paddedWindow = new Ext.Window({
    title: 'Window',
    bodyStyle: 'padding: 4px;'
});