Replace an Ext JS Element with a HTML string

After trying to do something as simple as replacing an HTML element in the dom with a string (HTML in this case) with Ext JS for about 3 hours without finding a proper answer on Google, I thought someone else might also benefit from my (sub-optimal) solution.

In my case, the string was a HTML fragment returned from an AJAX call. It needed to replace a HTML element already in place in the dom.

Ext.DomHelper.overwrite() works, but only replaces the contents of an existing element, not the element itself (and since the parent of that element contained other elements too, a higher level selection didn’t solve it either).

You would expect Ext.DomHelper.insertHtml(‘beforeBegin’, oldElement, html) and deleting the oldElement afterwards to work, but it generated an error message which (if I’m correct) told that the html string is not linked to the dom already (which is of course not the case).

Since I could not find a proper working solution, I tried to use the Ext.DomHelper.createTemplate() method to create an Ext.Template and to use template.insertBefore() with an empty values array to get it into the dom before removing the old element. This does not look optimal, but at least it works…


Tags: ,

 
 
 

One Response to “Replace an Ext JS Element with a HTML string”

  1. Gravatar of JR JR
    4. December 2010 at 18:59

    Here is a simple way to replace html inside of a div:

    Ext.fly(‘yourDivID’).update(‘the html to put in it’);

Leave a Reply