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

Posted 2021-05-06

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

combobox.store.getCount();

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

答案

你可以使用combo.getPicker()方法和picker有方法来选择records

在这个FIDDLE中，我使用combobox和multi-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。