PDA

View Full Version : [CLOSED] CheckboxGroup doesn't clear the invalid mark after being disabled



ansoncat
13 Aug 2013, 10:13 PM
REQUIRED INFORMATION


Ext version tested:

Ext 4.1.3
Ext 4.2.1

Browser versions tested against:

Chrome 28
IE10
FF23

DOCTYPE tested against:

<!doctype html>

Description:

After being disabled, CheckboxGroup still show the previous invalid mark(and error messages). Specifically, it fail to clear the invalid mark on disabling.

Steps to reproduce the problem:

Validate an invalid CheckboxGroup (E.g.: without any checkbox checked)
Disabling the CheckboxGroup.

The result that was expected:

Show a disabled CheckboxGroup without invalid mark.

The result that occurs instead:

Show a disabled CheckboxGroup with invalid mark.

Test Case:



var form = Ext.create('Ext.form.Panel', {
title: 'Checkbox Group',
width: 300,
height: 150,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'checkboxgroup',
fieldLabel: 'Two Columns',
allowBlank: false,
columns: 2,
vertical: true,
msgTarget: 'under',
items: [
{ boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Item 2', name: 'rb', inputValue: '2' }
]
}]
});

form.isValid();
form.down('checkboxgroup').setDisabled(true);


HELPFUL INFORMATION


Debugging already done:

Ext.form.CheckboxGroup does not have correct onDisable/onEnable methods.

Possible fix:

I use below overrides to workaround this problem currently.


Ext.define("Ext.fix.form.CheckboxGroup", {
override: "Ext.form.CheckboxGroup",
// from Ext.form.field.Base
onDisable: function() {
var me = this;
me.callParent();
if (me.hasActiveError()) {
// clear invalid state since the field is now disabled
me.clearInvalid();
me.needsValidateOnEnable = true;
}
},
// from Ext.form.field.Base
onEnable: function() {
var me = this;
me.callParent();
if (me.needsValidateOnEnable) {
delete me.needsValidateOnEnable;
// will trigger errors to be shown
me.forceValidation = true;
me.isValid();
delete me.forceValidation;
}
},
// from Ext.form.field.Base
isValid : function() {
var me = this,
disabled = me.disabled,
validate = me.forceValidation || !disabled,
isValid, errors;
if (!validate)
isValid = disabled;
else {
errors = me.getErrors(),
isValid = Ext.isEmpty(errors);
if (!me.preventMark) {
if (isValid) {
me.clearInvalid();
} else {
me.markInvalid(errors);
}
}
}
return isValid;
},
// from 'Ext.form.field.Field', original version
validate : function() {
var me = this,
isValid = me.isValid();
if (isValid !== me.wasValid) {
me.wasValid = isValid;
me.fireEvent('validitychange', me, isValid);
}
return isValid;
}
});


Operating System:

Windows 7

mitchellsimoens
14 Aug 2013, 5:48 AM
Thanks for the report.