As developers, we are often presented with UI choices. Some create subtle differences, others larger ones.

One of them is the way we present the possibility to select multiple items from a set (list) of predefined items. Traditionally this is realized by 2 select-lists with the multiple attribute.

In an (advanced) Sencha Ext Js implementation, you get this:
http://dev.sencha.com/deploy/dev/examples/multiselect/multiselect-demo.html

This offers a lot of features and while we as developers see this as the default way to offer this functionality, there are other options too.

In the spirit of mobile development, a list with check-boxes offers the same basic functionality:
http://demo.superdit.com/ext_listview_dataview/

You would also never be able to present the first solution on a small mobile screen. Another option to meet the same basic requirement is the way Google Calendar lets you add multiple invitees to an appointment.

Depending on the features you need, one option may be preferred over the other. Think of features like:

• Sorting: you may need to offer the possibility to sort the result.
• Quantity of predefined options: too much data may require a way to search.
• Linkability: list-items may also need to be clickable and link to detailed information.

In some cases, a more creative approach can really have your site or app pop out.

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…

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)!

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).