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

});