Button extjs4在单击时更改按钮功能

我有一个复选框组，有几个复选框和一个名为“Check All”（全部选中），单击时选中复选框组中的所有复选框。此外，单击时，按钮的文本更改为“全部取消选中”。当用户现在再次单击此按钮时，我希望选中复选框组中的所有复选框，并将按钮文本更改回“全部选中”。是否可以使用Ext.button.button或我需要使用Ext.button.Cycle？（注意：按钮被包装在面板中，因此它可以访问checkboxgroup中的所有复选框）

类似于以下内容：

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();
        }
    });

});

大概是这样的：

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();
        }
    });

});