/GridPicker

ExtJS 4 picker field using a grid panel as its list component

Primary LanguageJavaScript

GridPicker

Compatible with: ExtJS 4.2.0 ExtJS 4.2.1

The GridPicker component is an extended combo box that replaces the default list view with a full fledged GridPanel.

Among the extra possibilities that the grid panel offers, a notable one is the support of buffered rendering. Thanks to this, rendering huge data sets in buffered grid is actually very much faster than with standard combo boxes! Unfortunately, this component does not support buffered store; buffered rendering works with whole data set loaded in memory.

I've committed myself to make key navigation work properly. But multiselect is not supported.

Update 2014-07-31

Thanks to feedback from users, the GridPicker should now work with Ext 4.2.1 too.

Demo

The examples are available online.

Usage

The main difference with the regular ComboBox is that the listConfig and defaultListConfig options are replaced with gridConfig and defaultGridConfig. These, of course, expects the configuration of the GridPanel.

The only required config option for a working GridPicker is store. Like with regular combo, you can provide a single dimension array (e.g. ['Foo', 'Bar']) that will be converted to an implicit store.

You can configure the grid columns anyway you want, but you don't have to. If you don't provide columns configuration, the component will generate a default one, displaying the configured displayField.

Apart from that, most of standard combo options should be supported. If you find some that don't work (and are not documented here), let me know!

Here are some that I have tested and should work for sure:

  • displayField
  • forceSelection
  • queryDelay
  • queryModel
  • queryParam
  • store
  • typeAhead
  • valueField

And here are those which, for sure, don't work:

  • multiselect

Licence

Licenced under GPLv2