Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default [4.1 RC1] Ext.id() doesn't work properly on form elements with a child named "id"

    [4.1 RC1] Ext.id() doesn't work properly on form elements with a child named "id"


    Ext Build: 2012-03-29 23:30:09 (e3f58e832a28e6a99881af158394e9eec8aa523c)

    Ext.id() refers to "el.id" in several places. That's returning the child element and not the id attribute, as expected.

    This bug was found by trying to add an event listener on such a form. EventManager.getEventListenerCache() throws an exception in this case.

    Code:
    <script>
    
    Ext.onReady(function() {
    
            var form = document.forms[0];
            Ext.id(form);
            alert(form.getAttribute('id'));         // null
    
            var form2 = document.forms[1];
            Ext.id(form2);
            alert(form2.getAttribute('id'))         // Works
    
    });
    
    </script>
    
    <form name="SomeForm">
            <input type="hidden" name="id"/>
    </form>
    
    <form name="AnotherForm">
            <input type="hidden" name="abc"/>
    </form>

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This is by design, 'id' is reserved.

    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    "id" is not allowed as a control name?

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    I checked the html spec and I can't find any restrictions on control names.

    http://www.w3.org/TR/html401/interac...def-name-INPUT

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    It's frustrating to take the time to submit bug reports only to have them not taken seriously. Even if it's determined that this is not a bug, I feel I'm entitled to some kind of reply. That this issue could be fixed with such minimal effort, it surprises me that I'd get any pushback at all.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Scott asked me to look into this and the browser is behaving oddly. I'm like you @lagnat and I would expect this to work. Setting up a breakpoint to see what is going on within Ext.id and there is an if(!el.id) statement, why create an id if there is already one. It skips over this if statement but expanding the el variable in the scripts tag I see that id = "" so el.id is falsy. So why is it skipping the if statement? I add a watch expression to el.id and it's returning the <input> element which is odd. Ok, so this may be some sort of odd Ext JS bug.

    I tested without Ext JS and found that no, this is a browser behavior. Try with this test case that does not load any Ext JS file (no JS or CSS):

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
    
        <script type="text/javascript">
            function getid() {
                var form = document.forms[0];
                console.log(form.id);
    
                var form2 = document.forms[1];
                console.log(form2.id);
            }
        </script>
    
    </head>
    
    <body onload="getid()">
        <form name="SomeForm">
            <input type="hidden" name="id"/>
        </form>
    
        <form name="AnotherForm">
            <input type="hidden" name="abc"/>
        </form>
    </body>
    </html>
    You would expect the two console.log to return null or an empty string right? But what do they return? The first returns the <input> field with name = 'id' the second returns an empty string. So having name = 'id' will affect the form's id in a weird way.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    Mitchell..

    From what I can determine (via google), all of the major browsers support this "feature". That is, you can address any form element by name as an attribute of the form object. This creates a problem if you have input elements with names such as id or style.

    It seems to me that it's never a good idea to use dot-notation to access attributes. One should always use getAttribute(), and setAttribute().

    That also begs the question.. what happens if you have a form element with the name of "getElement".

    http://jibbering.com/faq/notes/form-access/

    Form controls can be referenced as named properties of the FORM element that contains them with a shortcut accessor:-

    var formControl = formElement.myControl;

    /* instead of :- */

    var formControl = fromElement.elements.myControl;

  8. #8
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    el.getAttribute('id').. please.

Thread Participants: 2