ExtJs-表单中的复选框选择

Question

I want to check all checkboxes in a form when user click on top checkbox. If any checkbox uncheck i want to uncheck top checkbox. I need same functionality like grid checkbox column.

ExtJS version: 6.2.1

Answer 1

You can use xtype: checkboxgroup .

In this FIDDLE , I have create a demo using checkboxgroup . I hope this will help you to achieve your requirement.

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

I believe you'll have to implement the custom logic yourself.

I would suggest using the Ext.form.CheckboxGroup component and listen to the change event ( see example in docs ). The value of the group would look something like this:

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

Depending on the value of the group dynamically check or uncheck each checkbox.

Answer 3

As ground_call said, you need to implement custom logic. One of approaches is to set checkbox group, and assign itemId to top checkbox. In ViewController create listener on change event for that top checkbox, that will turn on/off all other checkboxes. Other checkboxes you can handle via checkboxgroup 's change event. Here is fiddle with template for this implementation: https://fiddle.sencha.com/#view/editor&fiddle/2eqm