1

我有一个 ExtJS 组合框,要求有一个附加值,用户可以从第一个值中选择所有选项,如下所示:

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: {
        }
    });

});

当用户取消选中“全选”或选择“全选”以外的任何其他项目时,我希望能够取消全选。

真的不知道该怎么做?

JSFiddle在这里:http: //jsfiddle.net/dFEsc/1/

4

3 回答 3

5

我认为在组合商店中添加“全选”项目是一个坏主意 - 插件依赖于商店中的数据。最好将其添加到下拉列表并编辑插件,添加触发器:

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 ... - 都是胡说八道...

请参阅jsfiddle上的完整示例

更新:

我还认为向字段添加 tpl 也更好地制作插件,以便将其添加到任何组合框以添加插件。

在插件'init'函数中:

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

然后不必描述 listConfig 每个组合框。jsfiddle 上的链接也更新了。

更新2:

工具栏变体:http: //jsfiddle.net/dFEsc/16/

于 2013-02-15T13:57:30.760 回答
2

这不完全是您被询问的内容,因为如果您在单击全选后单击任何其他内容,它不会取消全选。但我认为这是一种更常见的行为。如果您单击全选两次,您仍然可以取消全选。

这是代码(快速脏。我相信它可以稍微调整一下)

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

于 2013-02-15T08:51:24.070 回答
2

// 是combo store,数据由Server加载,是全局存储

      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));
                                    }
                                }
                            }
                        }
                    }
于 2016-01-11T13:32:14.260 回答