javascript - ExtJs - 表单中的复选框选择

Question

当用户单击顶部复选框时，我想检查表单中的所有复选框。如果取消选中任何复选框，我想取消选中顶部复选框。我需要与网格复选框列相同的功能。

ExtJS版本:6.2.1

Answer 1

您可以使用xtype: checkboxgroup .

在此FIDDLE ，我使用 checkboxgroup 创建了一个演示。我希望这能帮助您实现您的要求。

代码片段

Ext.application({
    name: 'Example',

    launch: function () {
        Ext.create('Ext.form.Panel', {

            bodyPadding: 10,

            renderTo: Ext.getBody(),

            items: [{
                xtype: 'checkboxgroup',
                layout: 'vbox',
                fieldLabel: 'Privilege',
                checkedArr: [],
                defaults: {
                    flex: 1,
                    name: 'mycheck',

                    listeners: {
                        change: function (field, newValue, oldValue) {
                            var group = field.up('checkboxgroup');

                            if (field.name == 'all') {
                                group.doCheckUnCheckAll(newValue);
                            } else {
                                var len = group.query('[name=mycheck]').length,
                                    allCB = group.down('[name=all]');

                                if (newValue) {
                                    group.checkedArr.push(field.inputValue)
                                } else {
                                    Ext.Array.remove(group.checkedArr, field.inputValue);
                                }
                                group.doSetCBValue(allCB, len == group.checkedArr.length);
                            }
                        }
                    }
                },
                /**
                 * this function will set value of checkbox and do event suspend & resume
                 * @param {Checbox}
                 * @param {Boolean}
                 */
                doSetCBValue: function (f, v) {
                    //Check or uncheck
                    f.suspendEvent('change');
                    f.setValue(v);
                    f.resumeEvent('change');
                },

                /**
                 * This event will check or uncheck the all checkbox when {ALL} checkbox has beed checked/unchecked
                 * @param {Boolean}
                 */
                doCheckUnCheckAll: function (isCheck) {
                    this.query('[name=mycheck]').forEach(f => {
                        this.doSetCBValue(f, isCheck);
                        //For checking to other checkbox is checked or not
                        if (isCheck) {
                            if (this.checkedArr.indexOf(f.inputValue) == -1)
                                this.checkedArr.push(f.inputValue);
                        } else {
                            Ext.Array.remove(this.checkedArr, f.inputValue);
                        }
                    });
                },

                items: [{
                    boxLabel: 'ALL',
                    inputValue: 'all',
                    name: 'all'
                }, {
                    boxLabel: 'Item 1',
                    inputValue: '1'
                }, {
                    boxLabel: 'Item 2',
                    inputValue: '2'
                }, {
                    boxLabel: 'Item 3',
                    inputValue: '3'
                }, {
                    boxLabel: 'Item 4',
                    inputValue: '4'
                }, {
                    boxLabel: 'Item 5',
                    inputValue: '5'
                }, {
                    boxLabel: 'Item 6',
                    inputValue: '6'
                }]
            }]
        });
    }
});