Select all in ExtJS 4.0 Combobox

Question

I have an ExtJS Combobox and the requirement is to have an additional value where the user can select all the options from the first value like so:

Ext.onReady(function () {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbreviation', 'name'],
        data: [{
            name: 'Select all',
            abbreviation: 'ALL'
        },
        {
            name: 'ALABAMA',
            abbreviation: 'AL'
        }, {
            name: 'ALASKA',
            abbreviation: 'AK'
        }, {
            name: 'AMERICAN SAMOA',
            abbreviation: 'AS'
        }, {
            name: 'ARIZONA',
            abbreviation: 'AZ'
        }, {
            name: 'ARKANSAS',
            abbreviation: 'AR'
        }, {
            name: 'CALIFORNIA',
            abbreviation: 'CA'
        }, {
            name: 'COLORADO',
            abbreviation: 'CO'
        }, {
            name: 'CONNECTICUT',
            abbreviation: 'CT'
        }, {
            name: 'DELAWARE',
            abbreviation: 'DE'
        }, {
            name: 'DISTRICT OF COLUMBIA',
            abbreviation: 'DC'
        }, {
            name: 'FEDERATED STATES OF MICRONESIA',
            abbreviation: 'FM'
        }, {
            name: 'FLORIDA',
            abbreviation: 'FL'
        }, {
            name: 'GEORGIA',
            abbreviation: 'GA'
        }, {
            name: 'GUAM',
            abbreviation: 'GU'
        }, {
            name: 'HAWAII',
            abbreviation: 'HI'
        }, {
            name: 'IDAHO',
            abbreviation: 'ID'
        }, {
            name: 'ILLINOIS',
            abbreviation: 'IL'
        }, {
            name: 'INDIANA',
            abbreviation: 'IN'
        }, {
            name: 'IOWA',
            abbreviation: 'IA'
        }, {
            name: 'KANSAS',
            abbreviation: 'KS'
        }, {
            name: 'KENTUCKY',
            abbreviation: 'KY'
        }, {
            name: 'LOUISIANA',
            abbreviation: 'LA'
        }, {
            name: 'MAINE',
            abbreviation: 'ME'
        }, {
            name: 'MARSHALL ISLANDS',
            abbreviation: 'MH'
        }, {
            name: 'MARYLAND',
            abbreviation: 'MD'
        }, {
            name: 'MASSACHUSETTS',
            abbreviation: 'MA'
        }, {
            name: 'MICHIGAN',
            abbreviation: 'MI'
        }, {
            name: 'MINNESOTA',
            abbreviation: 'MN'
        }, {
            name: 'MISSISSIPPI',
            abbreviation: 'MS'
        }, {
            name: 'MISSOURI',
            abbreviation: 'MO'
        }, {
            name: 'MONTANA',
            abbreviation: 'MT'
        }, {
            name: 'NEBRASKA',
            abbreviation: 'NE'
        }, {
            name: 'NEVADA',
            abbreviation: 'NV'
        }, {
            name: 'NEW HAMPSHIRE',
            abbreviation: 'NH'
        }, {
            name: 'NEW JERSEY',
            abbreviation: 'NJ'
        }, {
            name: 'NEW MEXICO',
            abbreviation: 'NM'
        }, {
            name: 'NEW YORK',
            abbreviation: 'NY'
        }, {
            name: 'NORTH CAROLINA',
            abbreviation: 'NC'
        }, {
            name: 'NORTH DAKOTA',
            abbreviation: 'ND'
        }, {
            name: 'NORTHERN MARIANA ISLANDS',
            abbreviation: 'MP'
        }, {
            name: 'OHIO',
            abbreviation: 'OH'
        }, {
            name: 'OKLAHOMA',
            abbreviation: 'OK'
        }, {
            name: 'OREGON',
            abbreviation: 'OR'
        }, {
            name: 'PALAU',
            abbreviation: 'PW'
        }, {
            name: 'PENNSYLVANIA',
            abbreviation: 'PA'
        }, {
            name: 'PUERTO RICO',
            abbreviation: 'PR'
        }, {
            name: 'RHODE ISLAND',
            abbreviation: 'RI'
        }, {
            name: 'SOUTH CAROLINA',
            abbreviation: 'SC'
        }, {
            name: 'SOUTH DAKOTA',
            abbreviation: 'SD'
        }, {
            name: 'TENNESSEE',
            abbreviation: 'TN'
        }, {
            name: 'TEXAS',
            abbreviation: 'TX'
        }, {
            name: 'UTAH',
            abbreviation: 'UT'
        }, {
            name: 'VERMONT',
            abbreviation: 'VT'
        }, {
            name: 'VIRGIN ISLANDS',
            abbreviation: 'VI'
        }, {
            name: 'VIRGINIA',
            abbreviation: 'VA'
        }, {
            name: 'WASHINGTON',
            abbreviation: 'WA'
        }, {
            name: 'WEST VIRGINIA',
            abbreviation: 'WV'
        }, {
            name: 'WISCONSIN',
            abbreviation: 'WI'
        }, {
            name: 'WYOMING',
            abbreviation: 'WY'
        }]
    });

    Ext.define('comboSelectedCount', {
        alias: 'plugin.selectedCount',
        init: function (combo) {

            var fl = combo.getFieldLabel();

            combo.on({
                select: function (me, records) {

                    var len = records.length,
                        store = combo.getStore();

                    // toggle all selections
                    Ext.each(records, function (obj, i, recordsItself) {
                        if (records[i].data.abbreviation === 'ALL') {
                            len = store.getCount();
                            combo.select(store.getRange());
                        }
                    });

                    me.setFieldLabel(fl + ' (' + len + ' selected)');
                },
                beforedeselect: function (me, record, index) {
                    me.setFieldLabel(fl);
                }
            })
        }
    });

    // Create the combo box, attached to the states data store
    Ext.create('Ext.form.ComboBox', {
        disabled: false,
        plugins: ['selectedCount'],
        fieldLabel: 'Choose State',
        labelAlign: 'top',
        store: states,
        queryMode: 'local',
        editable: false,
        displayField: 'name',
        valueField: 'abbreviation',
        renderTo: Ext.getBody(),
        multiSelect: true,
        maxSelections: 3,
        width: 400,
        displayTpl: '<tpl for=".">' +
            '{name}' +
            '<tpl if="xindex < xcount">, </tpl>' +
            '</tpl>',
        listConfig: {
            itemTpl: '{name} <div class="chkbox"></div>'
        },
        listeners: {
        }
    });

});

I want to be able to de-select all when the user either un-checks 'Select all' or selects any other item but 'Select all'.

Can't really figure out how to do this?

JSFiddle here: http://jsfiddle.net/dFEsc/1/

Answer 1

I think to add a "select all" item in store of combo is a bad idea - plugin becomes dependent on the data in the Store. It is better to add it to the dropdown list and edit the plugin, add the trigger:

afterrender: function () {
    combo.container.on({
        click: function(e) {
            var el = e.getTarget('div', 3, true);
            if(el.getAttribute('action') == 'select-all') {
                if( ! allSelected) {
                    combo.select(combo.getStore().getRange());
                    combo.setSelectedCount(combo.getStore().getRange().length);
                    el.setHTML('Deselect all...');
                    allSelected = true;
                }else{
                    combo.reset();
                    el.setHTML('Select all...');
                    allSelected = false;
                }
            }
        }
    })
}

Ext.each(records ... - it is all nonsense ...

See full example on jsfiddle

Update:

I also think that adding a tpl to the field is also better to make a plugin for it to be added to any combo box to add the plugin.

In plugin 'init' function:

Ext.apply(combo, {
    listConfig: {
        tpl : new Ext.XTemplate(
            '<div action="select-all" class="sel-all">Select all...</div><tpl for="."><div class="x-boundlist-item">{name} <div class="chkbox"></div></div></tpl>'
        )
    }
});

Then not have to describe listConfig each combobox. Link on jsfiddle updated too.

Update2:

Variant with toolbar: http://jsfiddle.net/dFEsc/16/

Answer 2

This is not exactly what you are asked cause it don't deselect all if you click any other after you clicked select all. But I think this is a more common behavior. You can still deselect all if you click select all twice.

Here is the code (quick an dirty. I am sure it can be tweaked a bit)

Ext.define('comboSelectedCount', {
    alias: 'plugin.selectedCount',
    init: function (combo) {

        var fl = combo.getFieldLabel();

        combo.on({
            select: function (me, records) {
                var len = records.length,
                    store = combo.getStore(),
                    diff = records.length != store.count,
                    newAll = false,
                    all = false,
                    newRecords = [];

                // toggle all selections
                Ext.each(records, function (obj, i, recordsItself) {
                    if (records[i].data.abbreviation === 'ALL') {
                        allRecord = records[i];
                        if (!combo.allSelected) {
                            len = store.getCount();
                            combo.select(store.getRange());
                            combo.allSelected = true;
                            all = true;
                            newAll = true;
                        } else {
                            all = true;
                        }
                    } else {
                        if (diff && !newAll)
                            newRecords.push(records[i]);
                    }

                });
                if (combo.allSelected && !all) {
                    combo.clearValue();
                    combo.allSelected = false;
                } else  if (diff && !newAll) {
                    combo.select(newRecords);
                    combo.allSelected = false;
                }

                me.setFieldLabel(fl + ' (' + len + ' selected)');
            },
            beforedeselect: function (me, record, index) {
                me.setFieldLabel(fl);
            }
        })
    }
});

JSFiddle

Answer 3

// It's combo store, in which data loaded by Server, It's global store

      Ext.Ajax.request({
            url: '/myProject/api/teams',
            success: function (response, opts) {
                var responseObj = Ext.decode(response.responseText);
                var dataTeam = new Array();
                dataTeam[0] = new Array();
                dataTeam[0]['name'] = 'All';
                dataTeam[0]['value'] = -1;
                var j=0;
                for(var i=1; i<=responseObj.length; i++){
                    dataTeam[i] = new Array();
                    dataTeam[i]['name'] = responseObj[j].TEAMDESC;
                    dataTeam[i]['value'] = responseObj[j].TEAMID;
                    j++;
                }
                teamAllStore = Ext.create('Ext.data.Store', {
                    autoDestroy: false,
                    fields: ['name', 'value'],
                    data: dataTeam
                });
            }
        });

        //its my combo
       {
                    xtype: 'combo',
                    fieldLabel: 'Teams',
                    name: 'myTeam',
                    itemid: 'myTeam',
                    store: teamAllStore,
                    width:255,
                    labelWidth : 70,
                    displayField: 'name',
                    valueField: 'value',
                    queryMode: 'local',
                    mode: 'local',
                    emptyText:'Select Team',
                    triggerAction: 'all',
                    forceSelection: true,
                    allowBlank: false,
                    editable: true,
                    margins: '5 0 0 5',
                    myValue:0,  // initialized your variable..
                     multiSelect:true,
                     listConfig : {
                     getInnerTpl : function() {
                        return '<div class="chkCombo"> {name} </div>';
                        }
                     },
                     // this listeners for select all and de-select combo valuesall..
                     listeners: {
                        select: function (combo, eOpts) {

                                var store = combo.getStore();
                                if(combo.myValue==1){
                                     combo.reset();
                                    combo.myValue=0;
                                }
                                for (var i = 0; i < store.data.items.length; i++) {
                                    if(combo.value[i]==-1) {
                                        combo.myValue=1;
                                        combo.select(combo.getStore().collect(combo.valueField));
                                    }
                                }
                            }
                        }
                    }