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…

Ext on its way to world domination

Ext JS Core

While Ext JS turns 3 and already had a turbulent past, the development team has come up with a new project & licensing structure.

While it is still in beta, Ext JS seems to have been split up in an Ext JS Core library, which is a complete alternative to jQuery, Prototype, Dojo, Mootools,… and the upcoming full Ext JS library, which will probably include the features you know Ext best for: the slick user interface.

Together with the beta release of the core version, a bunch of popular widgets have been mimicked: Lightbox, Tabs, Image rotation and Context menu’s.

The Ext JS Core is MIT licensed, which basically means it is completely free. There was of course no other way to go because of the competition. But since the core version completely eliminates the use of any other JavaScript framework, it will pave the way even more for the full version. Together with the already huge Ext community (> 70000 registered members), world domination can’t be far away.

Although I have had a lot of fun with jQuery, I guess I no longer have a reason to use it. They seem to have done a fine job to offer a replacement (with a file size that almost matches)!

Ext JS available via CDN

As many JavaScript libraries relied on Google or AOL, Ext JS didn’t have a CDN.

Until now: they have partnered with CacheFly.

If you, for instance, need the complete library, use:

  • http://extjs.cachefly.net/ext-2.2/ext-all.js
  • http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css

This is great. Ext JS can be one of the bigger libraries (even minified & packed).