Hi,
I see the following AbstractComponent's initStyles sources in ExtJS 4.0.7.
AbstractComponent's initStyles in ExtJS 4.0.7
initStyles : function () {
var style = {},
me = this,
Element = Ext.Element;
if (Ext.isString(me.style)) {
style = Element.parseStyles(me.style);
} else {
style = Ext.apply({}, me.style);
}
// Convert the padding, margin and border properties from a space seperated string
// into a proper style string
if (me.padding !== undefined) {
style.padding = Element.unitizeBox((me.padding === true) ? 5 : me.padding);
}
if (me.margin !== undefined) {
style.margin = Element.unitizeBox((me.margin === true) ? 5 : me.margin);
}
delete me.style;
return style;
}
As far as I can understand the border property is just missed or not implemented.
Here is the new initStyles in ExtJS 4.1.0.
AbstractComponent's initStyles in ExtJS 4.1.0
initStyles : function (targetEl) {
var me = this,
Element = Ext.Element,
padding = me.padding,
margin = me.margin,
x = me.x,
y = me.y,
width, height;
if (padding !== undefined) {
targetEl.setStyle('padding', Element.unitizeBox((padding === true) ? 5 : padding));
}
if (margin !== undefined) {
targetEl.setStyle('margin', Element.unitizeBox((margin === true) ? 5 : margin));
}
if (me.border !== undefined) {
me.setBorder(me.border, targetEl);
}
if (me.cls) {
targetEl.addCls(me.cls);
delete me.cls;
}
if (me.style) {
targetEl.setStyle(me.style);
delete me.style;
}
if (x !== undefined) {
targetEl.setStyle('left', x + 'px');
}
if (y !== undefined) {
targetEl.setStyle('top', y + 'px');
}
if (!me.getFrameInfo()) {
width = me.width;
height = me.height;
if (typeof width == 'number') {
targetEl.setStyle('width', width + 'px');
}
if (typeof height == 'number') {
targetEl.setStyle('height', height + 'px');
}
}
}
So, it appears to be supported on the AbstractComponent level in ExtJS 4.1.0.
Though I've just tested it with Chart and it doesn't appear to be working well, and, to be honest, I'm not sure it should or not, it will or not. I just feel it should not, just not documented.
For now, I would suggest to set up a respective CtCls of a Chart, because I discovered that if StyleSpec with border is set up for a Chart, there is a problem with sizing - a Chart's "rect" HTML element exceeds its container. Not sure what effects it can cause, but I would prefer to avoid it.
Example
<style type="text/css">
.my-chart-container {
border: 5px solid red;
}
</style>
<ext:Chart runat="server" CtCls="my-chart-container">
...
</ext:Chart>