Toggle checkboxes in a checkboxgroup

Question

I have checkbox group which are 8 checkbox elements available ( days of week). When an user click the "ALL" checkbox, I want to toggle all checkboxes. I tried to use change event of checkboxgroup but change event fires only while page loading. Is there any method or event in order to make such a thing?

{
xtype: 'checkboxgroup',
id: 'cb-work-days',
fieldLabel: 'PROMOSYON GÜNLERİ',
labelWidth: '280px',
inputWidth: 250,
width: 530,
columns: 4,
vertical: true,
margin: '0 0 15 0',
items: [
    {boxLabel: 'PZT', name:'PROMO_WEEK_DAY', inputValue: '1'},
    {boxLabel: 'SAL', name:'PROMO_WEEK_DAY', inputValue: '2'},
    {boxLabel: 'ÇAR', name:'PROMO_WEEK_DAY', inputValue: '4'},
    {boxLabel: 'PER', name:'PROMO_WEEK_DAY', inputValue: '8'},
    {boxLabel: 'CUM', name:'PROMO_WEEK_DAY', inputValue: '16'},
    {boxLabel: 'CTS', name:'PROMO_WEEK_DAY', inputValue: '32'},
    {boxLabel: 'PAZ', name:'PROMO_WEEK_DAY', inputValue: '64'},
    {boxLabel: 'ALL', name:'PROMO_WEEK_DAY', inputValue: '128'}
],
listeners: {
    change: function(cb, newValue) {
        var val = parseInt(newValue['PROMO_WEEK_DAY']);
        var cbs = Ext.getCmp('cb-work-days').getBoxes();

        if (val == 128) {
            Ext.Array.each(cbs, function(cb) {
                // cb.setValue(!cb.getValue());
                cb.setValue(true);
            })
        }
    }
}
}

Working Example

{
xtype: 'checkboxgroup',
id: 'cb-work-days',
fieldLabel: 'PROMOSYON GÜNLERİ',
labelWidth: '280px',
inputWidth: 250,
width: 530,
columns: 4,
vertical: true,
margin: '0 0 15 0',
items: [
    {boxLabel: 'PZT', name:'PROMO_WEEK_DAY', inputValue: '1'},
    {boxLabel: 'SAL', name:'PROMO_WEEK_DAY', inputValue: '2'},
    {boxLabel: 'ÇAR', name:'PROMO_WEEK_DAY', inputValue: '4'},
    {boxLabel: 'PER', name:'PROMO_WEEK_DAY', inputValue: '8'},
    {boxLabel: 'CUM', name:'PROMO_WEEK_DAY', inputValue: '16'},
    {boxLabel: 'CTS', name:'PROMO_WEEK_DAY', inputValue: '32'},
    {boxLabel: 'PAZ', name:'PROMO_WEEK_DAY', inputValue: '64'},
    {
        boxLabel: 'ALL', 
        name:'PROMO_WEEK_DAY', 
        inputValue: '128',
        listeners: {
            change: function(cb, checked) {
                var boxes = cb.up().query('checkbox:not([inputValue=128])');
                if (checked) {
                    Ext.each(boxes, function(box) {
                       box.setValue(true);
                    }) 
                } else {
                    Ext.each(boxes, function(box) {
                       box.setValue(false);
                    })                    
                }
            }
        }
    }
]
}

Answer 1

Listen for the change event of the checkbox itself:

{
    xtype: 'checkboxgroup',
    renderTo: Ext.getBody(),
    id: 'cb-work-days',
    fieldLabel: 'PROMOSYON GÜNLERİ',
    labelWidth: '280px',
    inputWidth: 250,
    width: 530,
    columns: 4,
    vertical: true,
    margin: '0 0 15 0',
    items: [
        {boxLabel: 'PZT', name:'PROMO_WEEK_DAY', inputValue: '1'},
        {boxLabel: 'SAL', name:'PROMO_WEEK_DAY', inputValue: '2'},
        {boxLabel: 'ÇAR', name:'PROMO_WEEK_DAY', inputValue: '4'},
        {boxLabel: 'PER', name:'PROMO_WEEK_DAY', inputValue: '8'},
        {boxLabel: 'CUM', name:'PROMO_WEEK_DAY', inputValue: '16'},
        {boxLabel: 'CTS', name:'PROMO_WEEK_DAY', inputValue: '32'},
        {boxLabel: 'PAZ', name:'PROMO_WEEK_DAY', inputValue: '64'},
        {boxLabel: 'ALL', name:'PROMO_WEEK_DAY', inputValue: '128',
            listeners: {
                change: function(cb, checked) {
                    if (checked) {
                        var boxes = cb.up().query('checkbox:not([inputValue=128])');
                        Ext.each(boxes, function(box) {
                            box.setValue(true);
                        });
                    }
                }
            }}
    ]
}

And... You meant 127 for your "all" value, not 128... Didn't you?