Let the user select an item in a modal dialog

After having used the shiny new YUI3 library for a project, it’s about time to share my YUI3 experiences with you.
For the project I built an item selector: A modal dialog is openend and the user has to select an item. After selection the dialog is closed and the selected item is passed to a callback function.

Here you can find the full source for the item selector. An example to use the selector can be as simple as this:

Just click on the following button, to start the example. Enjoy and let me know your comments.


Phone number selector in ExtJS

Wouldn’t it be nice to use a combo box of flag images to select the country code of phone numbers?

If you use a country selection component that’s quite easy. Just wrap it in a re-usable component together with a textfield for the local number and the result looks like this:

And here’s the example’s source:

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.

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.

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.