在ExtJS 4中搜索组合框的工具栏

Question

I found an example for searching in combobox.

不幸的是，例如，当开始时，我们按“全选”按钮，然后在搜索文本字段中键入内容时，先前选择的项目将被取消选择。是否可以记住先前选择的物品而不将其从商店中移除？

代码：

Ext.onReady(function () {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbreviation', 'name'],
        data: [{
            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(),
                allSelected = false,
                id = combo.getId() + '-toolbar-panel';

            Ext.apply(combo, {
                listConfig: {
                    tpl: new Ext.XTemplate(
                        '<div id="' + id + '"></div><tpl for="."><div class="x-boundlist-item">{' + combo.displayField + '} <div class="chkbox"></div></div></tpl>'
                    )
                }
            });
            var toolbar = Ext.create('Ext.toolbar.Toolbar', {
                items: [{
                    text: 'Select all',
                    icon: 'http://cdn.sencha.io/extjs/4.1.0.b1/resources/themes/images/default/menu/checked.gif',
                    handler: function (btn, e) {
                        if (!allSelected) {
                            combo.select(combo.getStore().getRange());
                            combo.setSelectedCount(combo.getStore().getRange().length);
                            btn.setText('Deselect all...');
                            allSelected = true;
                        } else {
                            combo.reset();
                            btn.setText('Select all...');
                            allSelected = false;
                        }
                        e.stopEvent();
                    }
                }, '-', {
                    xtype: 'textfield',
                    enableKeyEvents: true,
                    emptyText: 'enter search term',
                    listeners: {
                        keyup: function (field, e) {
                            combo.getStore().clearFilter();
                            if (field.getValue()) {
                                combo.getStore().filter({
                                    property: 'name',
                                    value: field.getValue(),
                                    anyMatch: true,
                                    caseSensitive: false
                                });
                            }
                        }
                    }
                }]
            });
            combo.on({
                select: function (me, records) {
                    var len = records.length,
                        store = combo.getStore();
                    combo.setSelectedCount(len);
                },
                beforedeselect: function (me, record, index) {
                    me.setFieldLabel(fl);
                },
                expand: {
                    fn: function () {
                        var dropdown = Ext.get(id).dom.parentElement;
                        var container = Ext.DomHelper.insertBefore(dropdown, '<div id="' + id + '-container"></div>', true);
                        toolbar.render(container);
                    },
                    single: true
                }
            });
            combo.setSelectedCount = function (count) {
                combo.setFieldLabel(fl + ' (' + count + ' selected)');
            }
        }
    });

    // 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
    });
});