1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default DomHelper bug inserting before/after a table element.

    DomHelper bug inserting before/after a table element.


    The following code (where "this.table.dom" refers to a table element)

    Code:
    Ext.DomHelper.insertBefore(this.table.dom, {tag:"div"}, true)
    Returns null on IE7.

    This because of the code below. It calls insertIntoTable even if where is "beforebegin" or "afterend". The tag is inserted INTO a temporary table using innerHTML, and pulled out using .firstChild.firstChild.firstChild. The result is a weird element (Its nodeType is 1) with no tagName which contains the div. Ext.get() called on that returns null.

    Code:
                if(tag == "table" || tag == "tbody" || tag == "tr"){
                   return insertIntoTable(tag, where, el, html);
                }
    This code should be:

    Code:
                if((tag == "table" || tag == "tbody" || tag == "tr") &&
                   (where != "beforebegin") && (where != "afterend")){
                   return insertIntoTable(tag, where, el, html);
                }

  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


    Added, ty. Any chance you want to tackle refactoring the insertIntoTable function?

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I'll have a look at it when I get a chance.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    DomHelper.insertHTML. The code which redirects to insertIntoTable should look like this:

    Code:
                if(/^t(r|able|body)$/.test(tag) &&
                   /^afterbegin$|^beforeend$/.test(where)){
                   return insertIntoTable(tag, where, el, html);
    It is only inserting into a table if where is "afterBegin" or "beforeEnd". So insertIntoTable can be a bit simpler:

    Code:
        function insertIntoTable(tag, where, el, html){
            if(!tempTableEl){
                tempTableEl = document.createElement('div');
            }
            var node;
            if(tag == 'tr'){
               tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
               node = tempTableEl.firstChild.firstChild.firstChild.firstChild;
            }else{
               if (tag == 'table') {
                   el = el.tBodies;
                   el = el[(where == 'afterbegin') ? 0 : el.length - 1];
               }
               tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
               node = tempTableEl.firstChild.firstChild.firstChild;
            }
            if(where == 'afterbegin'){
                el.insertBefore(node, el.firstChild);
            }else{
                el.appendChild(node);
            }
            return node;
        }

  5. #5
    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


    Looking better. Did you try it with a TD as the target element?

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes with "afterBegin" and "beforeEnd". That inserts HTML insode a TD element without going into insertIntoTable.

    Using "beforeBegin" and "afterEnd" of a TD won't work. Bah! TD elements with these "where" positions have to be handled weirdly too!

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    This has been horrible.

    I have

    Code:
    function insertIntoTable(tag, where, el, html){
        if(!tempTableEl){
            tempTableEl = document.createElement('div');
        }
        var node;
        var before = null;
        if(tag == 'td') {
        	if (where == 'afterbegin' || where == 'beforeend') { // INTO a TD
        		return;
        	}
        	if (where == 'beforebegin') {
        		before = el;
        		el = el.parentNode;
        	} else {
        		before = el.nextSibling;
        		el = el.parentNode;
        	}
            tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
            node = tempTableEl.firstChild.firstChild.firstChild.firstChild;
        }
        else if (tag == 'tr'){
    	    if (where == 'beforebegin') {
    	    	before = el;
    	    	el = el.parentNode;
                tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
                node = tempTableEl.firstChild.firstChild.firstChild;
    	    } else if (where == 'afterend'){
    	    	before = el.nextSibling;
    	    	el = el.parentNode;
                tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
                node = tempTableEl.firstChild.firstChild.firstChild;
    	    } else { // INTO a TR
    	    	if(where == 'afterbegin') before = el.firstChild;
                tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
                node = tempTableEl.firstChild.firstChild.firstChild.firstChild;
            }
         } else if (tag == 'tbody'){
    	    if (where == 'beforebegin') {
    	    	before = el;
    	    	el = el.parentNode;
                tempTableEl.innerHTML = '<table>'+html+'</table>';
                node = tempTableEl.firstChild.firstChild;
    	    } else if (where == 'afterend'){
    	    	before = el.nextSibling;
    	    	el = el.parentNode;
                tempTableEl.innerHTML = '<table>'+html+'</table>';
                node = tempTableEl.firstChild.firstChild;
            } else {
    	    	if(where == 'afterbegin') before = el.firstChild;
    	        tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
    	        node = tempTableEl.firstChild.firstChild.firstChild;
    	    }
        } else { // TABLE
            if (where == 'beforebegin' || where == 'afterend') { // OUTSIDE the table
    		    return;
    	    }
        	if(where == 'afterbegin') before = el.firstChild;
            tempTableEl.innerHTML = '<table>'+html+'</tbody>';
            node = tempTableEl.firstChild.firstChild;
        }
        el.insertBefore(node, before);
        return node;
    }
    With the test in insertHtml being

    Code:
            var tag = el.tagName.toLowerCase();
            if(/^t(d|r|able|body)$/.test(tag)) {
            	result = insertIntoTable(tag, where, el, html);
            	if (result) {
            		return result;
            	}
            }
    Basically, anything to do with a table goes into insertIntoTable. That function returns undefined if it doesn't actually need to do that jiggery-pokery (ie before or after a TABLE, or inside a TD), so that "normal" processing can ocurr.

    It has to go through all that convoluted logic in order to create the element in the correct place!

  8. #8
    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


    Yikes that's nasty. Thanks Animal.

Similar Threads

  1. Replies: 15
    Last Post: 13 Jul 2007, 4:19 AM
  2. Faulty DomHelper.Template behaviour while adding table rows
    By manugoel2003 in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 20 Jan 2007, 1:37 AM
  3. Bug in DomHelper/Template - inserting table rows
    By jarrednicholls in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 8 Jan 2007, 10:21 AM
  4. Issue with DomHelper IE table handling
    By ncubeait in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 28 Dec 2006, 12:26 PM
  5. Example of inserting a new row into the grid
    By devol in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 10 Sep 2006, 10:52 AM

Thread Participants: 1