Enable/disable checkbox in extjs
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.
Rick Weller
Updated on August 20, 2020Comments
-
Rick Weller almost 4 years
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!
-
Rick Weller over 12 yearshaha i think i did something wrong. My radiobuttons are disabled and my checkboxes are enabled by default :)
-
A.W. about 10 yearsWhen I set the
checked: true
anddisabled: true
for a checkbox and submit the form, the server does not receive the checkbox parameter value ason
. It is omitted from the post params. How can I use both disabled and a checked value for a checkbox and get it as a parameter on submit?