EXTJS comboBox multiselect

Question

In the ExtJS 3.3.1, I tried to make comboBox to multi select , but it doesn't work.

Please help.

 var mArray = new Array("ALL", "AAA", "BBB");
        var mCombo = new Ext.form.ComboBox({ id: 'ID', fieldLabel: 'ID',
            triggerAction: 'all',
            height: 100, width: 163,
            multiSelect: true,
            store: mArray
        });
        Ext.getCmp('mCombo').setValue("ALL");

Stucco

Answer 1

There isn't a config option like multiSelect in Ext.form.ComboBox.
To get desired functionality you either need to develop a multiselect combobox by your own or use one of existing alternatives, like Ext.ux.form.CheckboxCombo, Ext.ux.form.SuperBoxSelect and Ext.ux.form.LovCombo.

Bandaid

Answer 2

Just change the xtype to 'tagfield'

xtype: 'tagfield'

This allows you to select multiple inputs.

The below code is how I'm using the tagfield in a View

{
    fieldLabel: 'Customers',
    name: 'customerIds',
    xtype: 'tagfield',
    queryMode: 'remote',
    valueField: 'Id',
    displayField: 'FirstName',
    forceSelection: true,
    allowBlank: false,
    store: {
        type: 'customers'
    },
    minChars: 1,
    triggerAction: 'all',
    typeAhead: true
}

This code also allows you to search and also for auto-completion.

Find my full View here

Ext.define('MyApp.view.CustomersSelectView', {
extend: 'Ext.form.Panel',
xtype: 'customersSelectView',
title: 'Select some Customers',
store: { type: 'someStore' },

bodyPadding: 10,

url: 'some url',
method: 'POST',

defaultType: 'textfield',
modal: true,
items: [{
    fieldLabel: 'Customers',
    name: 'customerIds',
    xtype: 'tagfield',
    queryMode: 'remote',
    valueField: 'Id',
    displayField: 'FirstName',
    forceSelection: true,
    allowBlank: false,
    store: {
        type: 'customers'
    },
    minChars: 1,
    triggerAction: 'all',
    typeAhead: true
}],

jsonSubmit: true,
buttons: [{
    text: 'Send',
    formBind: true,
    diabled: true,
    handler: function () {
        var form = this.up('form');
    
        if (form.isValid()) {
            form.submit({
                success: function (form, action) {
                    Ext.toast('Customers selected successfully');
                    form.reset();
                },
                failure: function (form, action) {
                    Ext.Msg.alert('Failure', 'Oops, something went wrong!');
                }
            });
        }
    }
}]});

Happy coding!

Mossbunker

Answer 3

return new Ext.form.ComboBox({
                            fieldLabel: fieldLabel,
                            hiddenName: name,
                            store: store ,
                            valueField:'value',
                            displayField:'value',
                            typeAhead: true,
                            mode: 'local',
                            triggerAction: 'all',
                            emptyText:'Select '+fieldLabel+' ...',
                            selectOnFocus:true,
                            allowBlank:allowBlank,
                            forceSelection : true,
                            disabled:disabled,
                            multiSelect:true,
                            width:200,
                            id:id,
                            listeners:{
                                change : function( frm, newValue, oldValue ) {
                                    doRenderTL();
                                }
                            },
                            renderTo: Ext.get( renderTo )
                        });

Pedagogics

Welcome to StackOverflow and thanks for helping answer a question! It is recommended to not only provide code, but to also provide some explanation about your answer. – Wastebasket