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:

ms.ItemSelector.selectItem(['Bart', 'Lisa', 'Homer', 'Marge', 'Maggie', 'Ned', 'Barney', 'Bob'], function(item){
  alert(item + ' is your favorite character.');
});

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


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:

Ext.onReady(function(){
    var model = new Ext.data.SimpleStore({
        fields: ['label', 'value'],
        data: [['Homer', 1], ['Marge', 2], ['Maggie', 3], ['Bart', 4], ['Lisa', 4]]
    });
    var panel = new Ext.FormPanel({
        frame: true,
        labelWidth: 50,
        width: 300,
 
        items: [{
            fieldLabel: 'I like',
            xtype: 'singleLineMultiSelect',
            store: model,
            anchor: '90%',
            mode: 'local',
            displayField: 'label',
            fromLegend: 'available',
            toLegend: 'selected',
            valueField: 'value',
            deleteText: 'delete',
            emptyText: 'Which Simpsons do you like?'
        }]
    });
    var element = Ext.query('script[src$=ext-multiselector.js]')[0];
    var renderElement = element.parentNode;
    panel.render(renderElement);
});

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.

Google Maps API for Flex

As I pointed out before, it’s unfortunately not possible to use Flex components as info windows for Google Maps.
Another issue is that the map is not available as a Flex component itself, therefore it’s a bit complicated to use it in Flex.
So I thought to address these issues in a little Google Maps API for Flex that you can download here under BSD license.
With openFlexInfoWindows I also added a method that allows you to use multiple Flex components as info window at once – nicely seperated in tabs.
Find an example below:

(Entweder JavaScript ist nicht aktiviert, oder Sie benutzen eine alte Version von Adobe Flash Player. Installieren Sie bitte den aktuellsten Flash Player. )
Source Code