Question

How do you implement a multiselect combobox as part of a Ext.FormPanel using ExtJs? I’ve been looking, but can’t seem to find a solution that is compatible with the latest version of ExtJs (this question is similar, but doesn’t have a working/current solution).

This is what I have so far, but it’s a single select:

new Ext.FormPanel({
    labelAlign: 'top',
    frame:      true,
    width:      800,
    items: [{
        layout: 'column',
        items:[{
            columnWidth: 1,
            layout:      'form',
            items: [{
                xtype:          'combo',
                fieldLabel:     'Countries',
                name:           'c[]',
                anchor:         '95%',
                allowBlank:     false,
                typeAhead:      true,
                triggerAction: 'all',
                lazyRender:     true,
                mode:           'local',
                store:          new Ext.data.ArrayStore({
                    id:     0,
                    fields: ['myId', 'displayText'],
                    data: [
                        ["CA", 'Canada'], 
                        ["US", 'United States'],
                        ["JP", 'Japan'],
                    ]
                }),
                valueField:   'myId',
                displayField: 'displayText'
            }]
        }]
    }]
}).render(document.body);

I didn’t see any parameters in the documentation that suggests that this is supported. I also found this and this but I could only get them working with Ext 2.

Answer 1

Check out the SuperBoxSelect extension.