在复选框组中切换复选框

时间:2014-02-13 07:52:01

标签: javascript extjs extjs4

我有一个复选框组,有8个复选框元素可用(星期几)。当用户单击“全部”复选框时,我想切换所有复选框。我尝试使用change的{​​{1}}事件但checkboxgroup事件仅在页面加载时触发。是否有任何方法或事件才能做出这样的事情?

change

工作示例

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

1 个答案:

答案 0 :(得分:1)

收听复选框本身的更改事件

{
    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);
                        });
                    }
                }
            }}
    ]
}

而且......你的“全部”价值意味着127,而不是128 ......你不是吗?