Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member nbabinski's Avatar
    Join Date
    Apr 2011
    Location
    Ukraine, Kyiv
    Posts
    22
    Vote Rating
    2
    nbabinski is on a distinguished road

      0  

    Default Ext.DomHelper.append and form with input(s) having name="parentNode"

    Ext.DomHelper.append and form with input(s) having name="parentNode"


    Ext.DomHelper.append method bug based on the seems a bug in the DOM insertAdjacentHTML


    Ext version tested:
    • Ext 4.1.1
    Browser versions tested against:
    • Chrome21
    • IE9
    • FF14
    Description:

    Ext.DomHelper.append method builds and inserts html fragment returning the resulting element.
    The problem is in element's parentNode property and only in the case when is creating form element with children inputs elements with name attribute set to parentNode.
    The resulting form element, returned from append method, has parentNode = not it's actual parent dom element but the one of its children with name attribute = parentNode. If form has more than one inputs with name=parentNode then form.parentNode = [of inputs with name=parentNode].
    Such behavior was due to the helper's insertHtml method.
    insertHtml method is based on insertAdjacentHTML DOM method.
    So the part:
    file: Helper.js
    line: 403 el.insertAdjacentHTML(hashVal[0], html);

    inserts html fragment in our case form tag with children, but form.parentNode is mapped not to the real parent element in the document.


    This bug is lead to problems for example during form submission in extjs, so for example imagine the case when you have a extjs form with 2 fields: first is text field and the second is file-upload field.
    In this case you are submitting the form using default ext submit action - building form and posts it via iframe.
    One remark - text field has name attribute = parentNode (parentNode name is case sensitive, it is required to get the bug).

    The method buildForm from the submit action uses formSpec and dom helper to build the form - here is all OK, but submit action in the end of submission has final part - removing created for upload file(s) form
    Ext.removeNode(formEl);
    There is most interesting, removeNode method is using DOM element parentNode property to access parent and remove a node, but in the above described scenario parentNode property of just built form is not the document.body, it is one of its child input/array of inputs elements.
    Result we have a DOM exception - number 8 - NOT_FOUND_ERR.

    Test Case:

    To see helper problems simple run this code in web-console of your browser being on the page where extjs is loaded (for example on extjs documentation page).
    Code:
    
            var spec = {
                tag: "form",
                cn: [
                {
                    name: "parentNode",
                    type: "text",
                    tag: "input"
                }]
            };
    
    
            var el = Ext.DomHelper.append(Ext.getBody(), spec);
    
    
            console.log('element', el);
            console.log('element\'s parentNode', el.parentNode);
            console.log('body', Ext.getBody().dom);

    Results will be:
    element <form>​…​</form>​
    element's parentNode <input name=​"parentNode" type=​"text">​
    body <body id=​"ext-gen1001" class=​"x-body x-webkit x-chrome x-reset x-layout-fit x-container">​…​</body>​

    So the form's parentNode is not body but its child element.


    If the form spec will be updated in such way:
    Code:
            var spec = {
                tag: "form",
                cn: [
                {
                    name: "parentNode",
                    type: "text",
                    tag: "input"
                },{
                    tag: "input",
                    name: "parentNode",
                    type: "hidden",
                    value: "test"
                }]
            };
    just created from element's parentNode property will be an array of two elements:

    element's parentNode [<input name=​"parentNode" type=​"text">​, <input name=​"parentNode" type=​"hidden" value=​"test">​]


    HELPFUL INFORMATION

    Such behavior was observed only with input and textarea elements inside the form element.
    More over you can run the following code in the dev console tool(tested in Chrome and Firefox on windows) like FireBug being on any web page:


    Code:
    document.body.insertAdjacentHTML('beforeend', '<form action="/" method="POST"><input type="text" name="parentNode" value="test" /></form>');
    var form = document.body.lastChild;
    console.log(form.parentNode);

    incorrect result:
    HTML Code:
    <input type="text" value="test" name="parentNode">

    BUT running the same code with only one space after the form end:


    Code:
    document.body.insertAdjacentHTML('beforeend', '<form action="/" method="POST"><input type="text" name="parentNode" value="test" /></form> ');
    var form = document.body.lastChild;
    console.log(form.parentNode);


    correct result:
    HTML Code:
    <body id="ext-gen1001" class="x-body x-gecko x-reset x-layout-fit x-container">

    The conclusion for using in extjs - having form uploads using ext basic form and submit action - do not use fields with name = parentNode also submitting the form do not use the parentNode properties inside the params, baseParams as all data from params, baseParams are going to the built form as hidden fields with name attributes = properties from the corresponding configuration options in submit method.


    Debugging already done:
    • yes
    Possible fix:
    As possible fix can be tried - add one single space in html generated by
    Ext.dom.AbstractHelper class markup method, at the end of the markup.
    The example is given above - '....</form> ', gives results.


    Operating System:
    • Windows 7

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    This has nothing to do with DomHelper, it's the browser trying to be "helpful":

    Code:
    Ext.onReady(function() {
        var form = document.createElement('form');
        var input = document.createElement('input');
        input.name = 'parentNode';
        form.appendChild(input);
        document.body.appendChild(form);
        console.log(form.parentNode);
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member nbabinski's Avatar
    Join Date
    Apr 2011
    Location
    Ukraine, Kyiv
    Posts
    22
    Vote Rating
    2
    nbabinski is on a distinguished road

      0  

    Default


    Hi Evan,

    This has to be fixed or created hints in the docs in the case of form submission with file upload.
    This has something to do with DomHelper - because it is responsible for element creation and it does not care what helper does in the internals...

    Yes, you are write that it is the browser problem, I've stated it using the insertAdjacentHTML.
    But working with ext I think should be created workaround for such problems or hints in documentations.
    As the example described above - form upload with params: {parentNode: 'some data'} or field with name=parentNode results in the bug, submitting it using the basic ext form.
    It is unexpected behavior from ext, do not talking right now about browser, and it sometimes time confusing to get answer to such bugs, at least docs hit must be.

Thread Participants: 1

Tags for this Thread