Enable/disable checkbox in extjs

Question

I want to enable or disable checkboxes in EXTJS

 dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            xtype: 'radiofield',
            id: 'all',
            name: 'show',
            boxLabel: 'All',
            checked: true,
            inputValue: 'all'
        }, {
            xtype: 'radiofield',
            id: 'online',
            name: 'show',
            boxLabel: 'Online',
            inputValue: 'online'
        }, {
            xtype: 'radiofield',
            id: 'offline',
            name: 'show',
            boxLabel: 'Offline',
            inputValue: 'offline'
        }, {
            xtype: 'checkboxfield',
            id: 'cb1',
            boxLabel: 'Sometimes',
            checked: true,
            inputValue: 'sometimes'
        }, {
            xtype: 'checkboxfield',
            id: 'cb2',
            boxLabel: 'Always',
            checked: true,
            inputValue: 'always'
        }],
        listeners: {
            change: function (field, newValue, oldValue) {
                var value = newValue.show;
                if (value == 'all') {
                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.disable();
                    cb2.disable();
                }
                if (value == 'online') {
                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.disable();
                    cb2.disable();
                }
                if (value == 'offline') {

                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.enable();
                    cb2.enable();

                }

            }
        }
    }]

How can I enable these checkboxes? They should be enabled when the user selects the offline option and disabled when the user selects other option.

Thanks for your help!

Answer 1

A couple errors I noticed:

The checkbox components cant be referred to by their id directly, you could call them with Ext.getCmp('id') though.

Your listener in the example above is attached to the toolbar, which doesn't have a change event. You need to attach it to the radio instead.

Actually, if you only want the checkboxes enabled when the 'offline' radio is filled then I would recommend adding a handler config to the 'offline' radio with a function to enable or disable the checkboxes depending on what value this radio is changed to. For example, this works:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'radiofield',
        id: 'all',
        name: 'show',
        boxLabel: 'All',
        checked: true,
    }, {
        xtype: 'radiofield',
        id: 'online',
        name: 'show',
        boxLabel: 'Online',
        inputValue: 'online',
    }, {
        xtype: 'radiofield',
        id: 'offline',
        name: 'show',
        boxLabel: 'Offline',
        inputValue: 'offline',
        handler: function(field, value) {
            if (value) {
                Ext.getCmp('cb1').enable();
                Ext.getCmp('cb2').enable();
            } else {
                Ext.getCmp('cb1').disable();
                Ext.getCmp('cb2').disable();        
            }            
        }
    }, {
        xtype: 'checkboxfield',
        id: 'cb1',
        boxLabel: 'Sometimes',
        checked: true,
        inputValue: 'sometimes',
        disabled: true
    }, {
        xtype: 'checkboxfield',
        id: 'cb2',
        boxLabel: 'Always',
        checked: true,
        inputValue: 'always',
        disabled: true
    }]
}],

I suggest using handler config (as above) and not having a listener on the change event.

If you add a change listener it will override the default change handler used by ExtJS internally to deselect the other radio fields in the same name group. E.g. with a change listener on the 'offline' radio, when you select it, 'all' will remain selected.

In other words... just copy the example above and all will be well.

Answer 2

You can do the following you need to set ids for the checkboxs to look them up in this example:

 if (value == 'offline') {
            var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids
            var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids

cb1.enable();
cb2.enable(); 

online 
  }
else {
        var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids
            var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids

cb1.disable();
cb2.disable(); 
}

Answer 3

A standard approach to enable / disable checkbox in ExtJS is to set configuration parameters disable: true or disable: false when creating component.

But as for ExtJS 4.2 - it has some inconvenience. Disabling or setting checkbox to readOnly makes component look very transparent. In classic framework design and maybe some others you won't even see a tick in the box if it's disabled or set to readOnly. As if it were empty.

The best solution we found is to create a project global css class for all ExtJS elements of this type. It shifts to a better tick sign in standard framework theme image and adds some opacity:

.x-form-readonly .x-form-checkbox {
  background-image: url(/extjs/resources/ext-theme-classic/images/form/checkbox.gif);
  opacity: 0.4;
}