PDA

View Full Version : Rendering incorrect when camel case property names used in component's style object



stahlman
28 Oct 2011, 9:12 AM
When generateMarkup encounters a style object within the input tree spec, it decomposes it into standard CSS syntax assignments...
name1:val1;name2:val2;

...without converting any of the names from camel case to hyphenated form. Thus, any conversion from camel case names used in the component's style property would need to happen within getRenderTree or one of its children. Unfortunately, the component's style object is applied as-is within Ext.util.ProtoElement.setStyle, and is passed back up the call stack to Ext.util.Renderable.getElConfig without any subsequent modification to property names. The result is invalid properties such as "borderStyle" in the actual markup inserted into the dom.

In Ext 4.0.x, this wasn't an issue because the style properties were set via JavaScript: e.g.,
dom.style[someCamelCasePropertyName] = <...>

Thanks,
Brett Stahlman

stahlman
28 Oct 2011, 12:49 PM
Not sure if this is the best place to put it, but to enable testing to proceed, I implemented the following quick-and-dirty workaround, which fixes the rendering issue...

Inside Ext.dom.AbstractHelper.generateMarkup (modifications in red)...



if (typeof val == "object") {

buffer.push(' ', attr, '="');

for (key in val) {

if (val.hasOwnProperty(key)) {

// Convert camel case keys to hyphenated form

var hkey = key.replace(/([a-z])([A-Z])/g, function(str, p1, p2) { return p1 + '-' + p2.toLowerCase(); });

buffer.push(hkey, ':', val[key], ';');

}

dongryphon
28 Oct 2011, 1:34 PM
Thanks for the report. This is definitely a bug in our bulk rendering... :">