views:

1248

answers:

2

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.

+1  A: 

Check out Saki's Ext.ux.form.LovCombo

ob1
It looks like it would work, but I like the UI of superboxselect better.
Justin Johnson
Did anybody try pre-selecting a few checkboxes in the dropdown on load? A team member of mine is facing some issues with it.
Prakash
+2  A: 

Check out the SuperBoxSelect extension.

Mike Sickler
I actually found that one earlier, but the examples weren't loading for some reason so I wrote it off. Turns out that it was exactly what I needed. Thanks man.
Justin Johnson
Is there a way to limit the box's height? There are a lot of countries and it makes the box that shows the selected values very tall.
Justin Johnson
I see that there is a `maxHeight` property, but this applies to the list of possible values, not the list of chosen values, which is the one that I want to restrict.
Justin Johnson
Nevermind that stupid follow up question. I realized after I asked this that I can achieve what I need with css.
Justin Johnson