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.