Multiselect combobox with ExtJs

javascript combobox extjs multi-select

18,397

Solution 1

Check out the SuperBoxSelect extension.

Solution 2

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

18,397

Author by

Justin Johnson

I'm a web application generalist. I paid my dues in the website world writing complex JavaScript applications powered by PHP REST APIs, and writing almost every kind of CMS tool you can think of. Currently, I'm working on an MMO in an end-to-end capacity. I almost entirely own the server components and REST APIs written in Java, I entirely own all of the Python/PHP CMS and support tools, and I implement UI features in C#/Unity for the game client. SOreadytohelp

Updated on June 04, 2022

Comments

Justin Johnson almost 2 years

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.

Justin Johnson almost 14 years

It looks like it would work, but I like the UI of superboxselect better.
Justin Johnson almost 14 years

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 almost 14 years

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 almost 14 years

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 almost 14 years

Nevermind that stupid follow up question. I realized after I asked this that I can achieve what I need with css.
aliensurfer over 13 years

Did anybody try pre-selecting a few checkboxes in the dropdown on load? A team member of mine is facing some issues with it.