CODEWITHSUNDEEP
javascriptextjs
user_27
user_27

Reputation: 231

ExtJs - checkbox selection in form

enter image description here

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

Upvotes: 0

Views: 5764

Answers (3)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

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

Upvotes: 2

Grigoriy Mikhalkin
Grigoriy Mikhalkin

Reputation: 5583

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

Upvotes: 0

alex.butnar
alex.butnar

Reputation: 284

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.

Upvotes: 0

Related Questions