1. #1
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    64
    Vote Rating
    2
    ojintoad is on a distinguished road

      0  

    Default Dom Helper Reserved Word Hack

    Dom Helper Reserved Word Hack


    Jack rightly changed the attribute 'class' to cls in his dom helper to not interfere with reserved words. Today I was using it to create a form and when I got to the label tag attempted to assign the 'for' attribute. It didn't work since 'for' is a reserved word(for for loops), and the code to manipulate the reserved words in the Dom helper is privatized, so I couldn't overload it. The simple way to modify this without writing your own version of the code is to change the attribute after the element is generated.

    Here's one way that uses regular expressions on the entire form's innerHTML.

    Code:
    var dh = YAHOO.ext.DomHelper;
    	dh.append('instantiatedForm1', {
    		tag: 'label', id: 'nameLabel', remove:"for=\'name\'", html: 'Name'
    		}
    	);
    	dh.append('instantiatedForm1', {
    		tag: 'input', id: 'name', type: 'text'
    		}
    	);
    	dh.append('instantiatedForm1', {
    		tag: 'label', id: 'ageLabel', remove:'for=\'age\'', html: 'Age'
    		}
    	);
    	dh.append('instantiatedForm1', {
    		tag: 'input', id: 'age', type: 'text'
    		}
    	);
    	var form = document.getElementById('instantiatedForm1');
    	form.innerHTML = form.innerHTML.replace(/remove="for='(\w+)'"/g, 'for=\"$1\"');
    I liked this option since it required only one dom lookup and, I imagine, it could possibly be done on the entire Body element. I also like it since it keeps the code where it should be. The regular expression /remove="for='(\w+)'"/g looks for the remove tag that gets generated, captrues the words in the parens. The replace function uses the captured word. Individual elements can't be done this way since there's no way to access an element tag's own HTML.

    The other option is to not specify the for element at all, then save the returned label element from the dom helper functions and use element.setAttribute('for', <formItemId>);.

    Code:
    var dh = YAHOO.ext.DomHelper;
    var label = dh.append('instantiatedForm1', {
    		tag: 'label', id: 'nameLabel', html: 'Name'
    		}
    	);
    label.setAttribute('for', 'name');
    Either technique should work for any reserved word.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Did you try quoting the attribute like this:

    Code:
    var dh = YAHOO.ext.DomHelper;
    var label = dh.append('instantiatedForm1', {
          tag: 'label', id: 'nameLabel', 'for': 'name', html: 'Name'
          }
       );

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    64
    Vote Rating
    2
    ojintoad is on a distinguished road

      0  

    Default


    Egg on my face! I didn't see your response to my comment. Tried to be too helpful.

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Being helpful is always a good thing! I'm sure other people will wonder the same thing and having a post about it will be good.

Similar Threads

  1. Rhino / jslint and reserved words
    By tof in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2008, 5:58 PM
  2. Undocumented: Hack the LayoutRegion-tools
    By Choleriker in forum Community Discussion
    Replies: 3
    Last Post: 1 Jan 2007, 12:31 PM
  3. [solved] how to use the dom helper ???
    By cobalt in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 14 Nov 2006, 9:05 AM
  4. Dom Helper Named Parameters in Compiled Templates
    By ojintoad in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 18 Oct 2006, 9:52 AM

Thread Participants: 1