button - extjs4 在单击时更改按钮功能

Question

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

Answer 1

像这样的东西：

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

});