Thanks to Filip Forrez for the inspiration for this post.

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.

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…