extjs4单击更改按钮功能

Question

我有一个包含多个复选框的复选框组和一个名为“全部选中”的按钮，单击该按钮时将检查该复选框组中的所有复选框。同样，在单击时，按钮的文本将变为“全部取消选中”。当用户现在再次单击此按钮时，我希望取消选中复选框组中的所有复选框，并希望将按钮文本更改回“全部检查”。是否可以使用Ext.button.Button还是我需要使用Ext.button.Cycle？（注意：按钮包装在面板中，因此可以访问复选框组中的所有复选框）

Answer 1

Something like this:

Ext.require('*');

Ext.onReady(function(){

    var allChecked = false,
        ignoreChange;

    var onChange = function(){
        if (ignoreChange) {
            return;
        }

        console.log('xxx');
        var checked = true;
        Ext.Array.each(fields, function(field){
            if (!field.checked) {
                checked = false;
                return false;
            }
        });

        allChecked = checked;
        updateButton();
    };

    var updateButton = function(){
        btn.setText(allChecked ? 'Uncheck All' : 'Check All');
    };

    var group = new Ext.form.CheckboxGroup({
        renderTo: document.body,
        columns: 1,
        items: [{
            text: 'A',
            boxLabel: 'A'
        }, {
            text: 'B',
            boxLabel: 'B'
        }, {
            text: 'C',
            boxLabel: 'C'
        }, {
            text: 'D',
            boxLabel: 'D'
        }, {
            text: 'E',
            boxLabel: 'E'
        }, {
            text: 'F',
            boxLabel: 'F'
        }]
    });

    var fields = group.query('checkbox');

    Ext.Array.forEach(fields, function(field){
        field.on('change', onChange);    
    });

    var btn = new Ext.button.Button({
        renderTo: document.body,
        text: 'Check All',
        handler: function(){
            ignoreChange = true;
            Ext.Array.forEach(fields, function(field){
                field.setValue(!allChecked);
            });
            ignoreChange = false;
            allChecked = !allChecked;
            updateButton();
        }
    });

});