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.

Building Mockups in ExtJS 4.1

Note: This post has been updated for ExtJS 4.1

In the early development phase it is usually a good idea to provide a mockup that is not using real data but some dummy data from memory. To do that for a grid in ExtJS we need to create a record class first. For a person this might look like this:

Then we need a store where instances of the Person class will be stored:

The store is initially loaded with data from peopleProxy which must be defined previously like this:

If we want to replace this in a later development phase with real data, we simply replace this proxy with an HttpProxy, which might look like this:

If we finally connect the store to a data grid, it looks like this: