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

});

extjs 4点击更改按钮功能

1 个答案: