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

时间:2018-03-29 18:26:22

标签: javascript extjs combobox extjs4.2

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

combobox.store.getCount();

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

2 个答案:

答案 0 :(得分:2)

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

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

CODE SNIPPET

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

答案 1 :(得分:1)

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

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

然后查看在“MultiSelect测试”中更改所选值时发生的情况。有关更多信息,请参阅:http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.ux.form.MultiSelect-method-getValue