1. #1
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    51
    Vote Rating
    1
    stahlman is on a distinguished road

      0  

    Default Rendering incorrect when camel case property names used in component's style object

    Rendering incorrect when camel case property names used in component's style object


    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

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    51
    Vote Rating
    1
    stahlman is on a distinguished road

      0  

    Default


    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)...

    Code:
    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], ';');
    }

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,405
    Vote Rating
    150
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Thanks for the report. This is definitely a bug in our bulk rendering...
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

Thread Participants: 1