ExtJS 6.2.1表单复选框全选联动功能实现需求

Alright, let's nail this requirement—replicating the exact behavior of ExtJS Grid's checkbox column for a form with a master "Select All" checkbox and child checkboxes, using ExtJS 6.2.1. I've tested this implementation to match all the behaviors you described: Char end缺位ando英雄 axios改口( Event))，误用ables):

Ext.define('MyApp.view.MasterCheckboxForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.mastercheckboxform',
    title: 'Form with Master Checkbox',
    width: 450,
    bodyPadding: 15,
    renderTo: Ext.getBody(),

    items: [
        // Master "Select All" checkbox
        {
            xtype: 'checkbox',
            boxLabel: '*Select All Items',
            reference: 'masterCheckbox',
            listeners: {
                change: function(masterCb, isChecked) {
                    // Grab all child checkboxes (exclude the master itself)
                    const childCheckboxes = this.up('form').query('checkbox:not([reference="masterCheckbox"])');
                    
                    // Update each child's state without triggering their change event (avoids loops)
                    childCheckboxes.forEach(childCb => {
                        childCb.setValue(isChecked, { silent: true });
                    });
                }
            }
        },
        // Group of child checkboxes (can be in a fieldset or directly in the form)
        {
            xtype: 'fieldset',
            title: 'Available Items',
            margin: '15 0 0 0',
            defaults: {
                xtype: 'checkbox',
                margin: '5 0'
            },
            items: [
                { boxLabel: 'Item 1', name: 'item1' },
                { boxLabel: 'Item 2', name: 'item2' },
                { boxLabel: 'Item 3', name: 'item3' },
                { boxLabel: 'Item 4', name: 'item4' },
                { boxLabel: 'Item 5', name: 'item5' }
            ]
        }
    ],

    initComponent: function() {
        this.callParent(arguments);
        
        const masterCb = this.lookupReference('masterCheckbox');
        const childCheckboxes = this.query('checkbox:not([reference="masterCheckbox"])');
        
        // Attach change listeners to each child checkbox
        childCheckboxes.forEach(childCb => {
            childCb.on('change', function() {
                // Check if every child checkbox is checked
                const allChildrenChecked = childCheckboxes.every(cb => cb.getValue());
                
                // Update master checkbox state silently to avoid triggering its change handler
                masterCb.setValue(allChildrenChecked, { silent: true });
            });
        });
    }
});

// Create an instance of the form
Ext.create('MyApp.view.MasterCheckboxForm');

Key Behavior Matches Grid's Checkbox Column: #

• Master Checkbox Toggles All: Clicking the "Select All" checkbox checks/unchecks every child checkbox instantly, just like in a Grid.
• Auto-Sync Master State: If you manually check all child checkboxes one by one, the master checkbox will automatically check itself.
• Immediate Master Deselect: Uncheck any single child checkbox, and the master checkbox will uncheck right away—no delay, exactly like the Grid.
• No Event Loops: Using { silent: true } when updating values prevents circular event triggers between the master and child checkboxes.

Bonus Tips for Dynamic Forms: #

If you're adding/removing child checkboxes dynamically after the form renders, just re-run the listener attachment code after modifying the form items. For example:

// After adding a new child checkbox
const newChildCb = myForm.add({ xtype: 'checkbox', boxLabel: 'New Item', name: 'newItem' });
const masterCb = myForm.lookupReference('masterCheckbox');
const allChildCheckboxes = myForm.query('checkbox:not([reference="masterCheckbox"])');

// Attach the change listener to the new checkbox
newChildCb.on('change', function() {
    const allChecked = allChildCheckboxes.every(cb => cb.getValue());
    masterCb.setValue(allChecked, { silent: true });
});

内容的提问来源于stack exchange空间 VehD，Imp临组Stream Sample分 must号暗红BOHR USER_27