如何知道在 multiSelect 组合框中选择了多少项

How to know how many items were selected in a multiSelect combobox

我有一个带有 multiSelect 属性 的组合框,我想知道如何知道我选择了多少项目。我试过:

combobox.store.getCount();

但它告诉我组合框中的项目总数,而不是用户选择的项目总数。基本上我想做一个条件,当用户在组合框中选择多个选项时触发

您可以使用 combo.getPicker() 方法并且 picker 有方法获得选择 records

在此 FIDDLE 中,我使用 comboboxmulti-select 创建了一个演示。我希望这能帮助你实现你的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        // The data store containing the list of states
        Ext.create('Ext.data.Store', {
            fields: ['abbr', 'name'],
            storeId: 'states',
            data: [{
                "abbr": "AL",
                "name": "Alabama"
            }, {
                "abbr": "AK",
                "name": "Alaska"
            }, {
                "abbr": "AZ",
                "name": "Arizona"
            }]
        });

        // Create the combo box, attached to the states data store
        Ext.create('Ext.panel.Panel', {
            title: 'Combo Example',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'combo',
                margin: 10,
                fieldLabel: 'Choose State',
                store: 'states',
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                multiSelect: true,
            }],
            bbar: ['->', {
                text: 'Get Selected',
                handler: function () {
                    var selectionModel = this.up('panel').down('combo').getPicker().getSelectionModel();
                    record = selectionModel.getSelection();
                    console.log(record);
                    Ext.Msg.alert('Info', 'Number of Selected record is ' + selectionModel.getCount());
                    //Ext.Msg.alert('Info', 'Selected record is <br> '+ record.map(r=>{return r.get('name')}).join('<br>'));
                }
            }]
        });
    }
});

这是一个可能的解决方案。转到 multiselect-demo.html,打开浏览器控制台(Google Chrome 和 Firefox 上的 F12)并输入:

f = Ext.getCmp("multiselect-field");
f.on("change", function () {
  console.log(this.getValue().length)
});

然后查看当您更改 "MultiSelect Test" 中的选定值时发生的情况。有关详细信息,请参阅:http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.ux.form.MultiSelect-method-getValue