Question

我想在用户点击顶部复选框时检查表单中的所有复选框。如果取消选中任何复选框，我要取消选中顶部复选框。我需要像网格复选框一样的功能。

ExtJS版本：6.2.1

Answer 1

您可以使用xtype: checkboxgroup。

在 FIDDLE 中，我使用checkboxgroup创建了一个演示版。我希望这能帮助您达到您的要求。

CODE SNIPPET

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

Answer 2

我相信你必须自己实现自定义逻辑。

我建议使用Ext.form.CheckboxGroup组件并收听更改事件（see example in docs）。该组的价值看起来像这样：

{    
 "Privileges": [
   "All",
   "Visible",
   "Manage"    
 ] 
}

根据组的值动态选中或取消选中每个复选框。

Answer 3

正如 ground_call 所说，您需要实现自定义逻辑。其中一种方法是设置复选框组，并将itemId分配给顶部复选框。在ViewController为{top}复选框创建change事件的侦听器，将打开/关闭所有其他复选框。您可以通过checkboxgroup的{{1}}活动处理其他复选框。以下是此实现的模板：https://fiddle.sencha.com/#view/editor&fiddle/2eqm

ExtJs - 表单中的复选框选择

3 个答案: