ExtJS: Put size / margin / padding in component or external .css file? `

Question

Is there a “best practice” when it comes to specifying size / stock / padding information in components (that is, adding it programmatically via JavaScript), as well as in its external CSS files?

I have a habit of doing the first. But I see that some people are arguing about putting this material in an external CSS file so that theoretically you can modify the 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 of your components and style them in your CSS files. For instance...

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

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

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

Obviously, this also allows you to group component styles together.

As a side note, I usually use the bodyStyle property to add formatting that is unlikely to change, for example ... most of Windows needs to be supplemented, and this is unlikely to change often, so I stick to this in the bodyStyle property.

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