Component for selecting multiple items in Ext

Ext already provides a component to select multiple items. The thing I do not like about it is that it covers too much space on the screen.
Therefore I thought of a component that initially looks like a combo box and then opens a new window to let the user select the items.

As a nice example tells more than thousand words – here it is:

As you can see, it is actually based on the component provided by the Ext examples.

And here’s the source code for the example:

Altough the example binds an in-memory store, you can also use an external store. If so, please remove the mode property – similar to a combo box.

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.

Getting values from a form containing combos in Ext

Actually it is pretty easy to get the values of all fields of a form in Ext: You just have to call the getValues() method of the BasicForm.
The problem with that approach is that it just takes the values directly from the DOM and is not calling the getValue() for each field (Which I assumed). One consequence is that you don’t get the values of combo boxes, but their labels.
To get the real values, I just did the following:

Firstly, I retrieved an array of all fields of the form:

(In my case these were just all children that were no fieldsets. You might have to change the condition above to suit your needs.)

Then, I just iterated over all fields and added the name/value pair to a result object:

That’s it – now result contains the real values of all fields.

Country selector with flag images in ExtJS

Based on the ExtJS-Tutorial on how to build a combo box with an icon, I built a component that can be used as a country selector in ExtJS.

Here you can find the code of the component:

It’s basically just a ComboBox using the IconCombo plugin with a predefined Store. The Store is in fact a SimpleStore which contains the country codes, labels and css classes for the icons for each country.
(If you wonder about the Extreme namespace, I am right now building a little component library for ExtJS).
The country selector is registered under the xtype of ‘countrycombo’. So here’s a small example of how to use it:

Thanks go also to FamFamFam where i retrieved the flag images.

Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.