Handling empty options with Ext JS combo box

Ext JS works great at easily transform plain vanilla combo boxes into powerful auto-complete combo boxes. I ran into an issue with an empty combo box option (that is <option/>).

Bad height for empty option

Bad height for empty option

Out of the box Ext JS handles <option/> by giving it a height of just a few pixels. Since there is no display value specified, all that we’re left with is the padding of the Ext JS rendered option. This isn’t desirable because it is not easy to select and it is counter to how <option/> is rendered in browsers.

Inadequate solutions

A variety of solutions I was able to Google suggested to use <option>&nbsp;</option> instead of <option/>. When the user starts typing, a nearly invisible space appears before the text and auto-complete brings back nothing. So unfortunately this breaks the user experience if this is the option currently selected. It also breaks the emptyText property in Ext JS.

Template solution

We can work around this by introducing a template:

new Ext.form.ComboBox({
 typeAhead: true,
 triggerAction: 'all',
 transform:'number',
 width:135,
 forceSelection:true,
 emptyText:'Select a number...',
 allowBlank:true,
 tpl:'<tpl for=".">' +
 '<div class="x-combo-list-item">' +
 '{text}&nbsp;' +
 '</div></tpl>'
});

This template will create an Ext JS combo box that is very similar to a plain combo box:

Correct height for an empty option

Correct height for an empty option

This solution works by adding a space (&nbsp;) of the text Ext JS displays. Because only Ext JS’s rendering of a combo box is changed, the actual combo box display value and value do not change.

This isn’t a horrible solution, but it would be nice if Ext JS handled this sort of thing out of the box.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Bloglines
  • Google Bookmarks
  • Technorati
  • TwitThis
Tags: , , ,