[FIXED-354][3.0.3] checkboxgroup and radiogroup validation markers are not cleared

[BlueCamel]

Ext version tested: Ext 3.0.3
Adapter used: ext
css used: only default ext-all.css
Browser versions tested against: Firefox 3.5.5
Operating System: Linux

Description:

Ive noticed this on my own form as well the the ExtJS example page. If allowBlank: false is set for a checkboxgroup or radiogroup and the field is showing invalid, when the user clicks a selection from the group the invalid flag does not clear.

Test Case:

See http://www.extjs.com/deploy/dev/exam...eck-radio.html

Steps to reproduce the problem:

1. Go to http://www.extjs.com/deploy/dev/exam...eck-radio.html
2. Click "Save" to submit the form without making any changes
3. Select any item from the "Custom Layout (w/ validation)" radiogroup
4. The validation error indicator remains visible after making the selection

The result that was expected:

With other fields the validation indicator will clear when the user corrects the validation error. The same thing is expected for checkboxgroup and radiogroup.

The result that occurs instead:

The error validation indicator remains on the screen even when the user corrects the validation error.

[BlueCamel]

Bumping because I'm not sure if this has been seen yet. Or, since this is my first bug report, I may have just not given enough info.

Has anyone else been able to confirm this behavior? If not I'll load up a few additional browsers in a VM and test more.

[Pyja]

I found too this problem..

I solved it like this :


1. give access to Group from checkbox (and radio)

Ext.override(Ext.form.Checkbox, {
    // Allow to retrieve the group container, if existing
    getGroup : function (){
        var anEl = this.getCheckEl().up('.x-form-element');
        if(anEl){
            var anElId = anEl.id;
            anElId = anElId.sub ('x-form-el-', '');
            return Ext.getCmp (anElId);
        }
        return null;
    }
});

2. validate the group when select a radio

Ext.override(Ext.form.Radio, {
    // Allow to validate group if setValue
    onClick : function(){
        Ext.form.Radio.superclass.onClick.call(this);
       var aGroup = this.getGroup ();
        if (aGroup){
            aGroup.validate ();
        }
    }
});

[Jamie Avins]

Fixed in svn 5642 for the 3.1 release.

[BlueCamel]

I tested these overrides on the examples checkbox-radio form and didn't see them work. I tried to modify them a bit to handle the situation but didn't get far.

From debugging it looks like getGroup() override doesn't return the expected component. anElId.sub() simply seems to take the element id and wrap it in  tags instead of what appears to be the intended use of extracting the elment id number.

The private getCheckEl() function appears to return the entire radiogroup anyway. Likely what's needed here is to transverse from the radiogroup element to component?

[BlueCamel]

Fixed in svn 5642 for the 3.1 release.

Nice! I'll check it out and take a look. Thanks!

[BlueCamel]

Fixed in svn 5642 for the 3.1 release.

This fix introduces a new behavior where the following happens:

1. Load the example checkbox form
2. select one of the validating radio buttons
3. click 'Reset'
4. The group is now marked invalid when the selection is cleared. Clicking reset a second time leaves the group selection cleared and also clears the invalid mark.

[Pyja]

I tested these overrides on the examples checkbox-radio form and didn't see them work. I tried to modify them a bit to handle the situation but didn't get far.

From debugging it looks like getGroup() override doesn't return the expected component. anElId.sub() simply seems to take the element id and wrap it in  tags instead of what appears to be the intended use of extracting the elment id number.

The private getCheckEl() function appears to return the entire radiogroup anyway. Likely what's needed here is to transverse from the radiogroup element to component?

I Didn't tested on a full Ext 3 Environment
My environment is a Ext2.2 (because lot of work with this version, and not enough time to migrate EXT 3) with some EXT 3 overrides (like Checkbox, Radio, CheckboxGroup, RadioGroup, DisplayField, ..), & some CSS

So, maybe doesn't work completely on EXT 3

Sorry for that

[Jamie Avins]

This fix introduces a new behavior where the following happens:

1. Load the example checkbox form
2. select one of the validating radio buttons
3. click 'Reset'
4. The group is now marked invalid when the selection is cleared. Clicking reset a second time leaves the group selection cleared and also clears the invalid mark.

Fixed in svn 5652. Added a fix for when BasicForm is resetting both the group and the individual items.

[santoshballary]

Hi ,

I am using extjs 4 and using rowEditor inside a row there is an radio groups , on add button am setting default value to the radio groups as 'null', it will come fine while saving ill select one value, after that once again if i click on add row , the radio group is taking previous value here is the code.


grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.Element.get('testDiv'),
plugins: [rowEditing],
store: userStore,
width: 960,
height:250,
frame: true,
selModel: Ext.create('Ext.selection.CheckboxModel'),
title: 'Meeting Clients',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id',
hidden:true
},{
text: 'First Name',
flex: 1,
sortable: true,
//renderer: renderTopic,
dataIndex: 'firstName',
field: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: 'Last Name',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield',
allowBlank: false
}
},

{
text: 'Company Name',
flex: 1,
sortable: true,
dataIndex: 'companyName',
field: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Country',
flex: 1,
sortable: true,
dataIndex: 'country',
field: {
xtype: 'textfield',
allowBlank: false
},
renderer: function (value, meta, record) {
var max = 42;
meta.tdAttr = 'data-qtip="' + value + '"';
return value.length < max ? value : value.substring(0, max - 3) + '...';
}
},
{
//xtype: 'radiogroup',

flex: 1,
sortable: true,
//tooltip: 'C Name Some name test',
text: "<span ' title='#{meetingManager.antiBriberyPlolicy()}'>Gov\'t Official ? <img src=\"#{request.contextPath}/images/help2.jpg \" height=\"18\" width=\"18\"/></span>",
//xtype: 'fieldcontainer',
id: 'govtOff',
defaultType: 'radiofield',
renderer: renderStatus,
dataIndex: 'govtOfficial',
field: {
xtype: 'radiogroup',
allowBlank: false,
cls: 'x-check-group-alt',
items: [
{boxLabel: 'Yes', name: 'govtOfficial', inputValue: true, checked:false},
{boxLabel: 'No', name: 'govtOfficial', inputValue: false, checked:false}
],
setValue: function (value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}

}

},{
xtype: 'actioncolumn',
width:60,
sortable: false,
items: [{
icon:'#{request.contextPath}/images/trash-btn-2011.png',
tooltip: 'Delete Meeting Clients',
dataIndex: 'id',
handler: function(grid, rowIndex, colIndex) {
Ext.MessageBox.confirm('', "Would you like to delete this Client?", function (btn) {
if (btn == 'yes')
userStore.removeAt(rowIndex);
});
}
}]
}
]
,
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,
layout: 'hbox', // same store GridPanel is using
dock:'bottom',
align:'center',
hideRefresh: true,
displayInfo: true,
listeners: {
'afterrender': function (component)
{
component.down('#refresh').hide()
},single: true
},
displayMsg: 'Clients {0} - {1} of {2}',
prependButtons: true,
items: [
{
xtype: 'label',
width:300
}
],
otherItems: [
{
xtype: 'combo',
itemId: 'combotop',
id:'combotop',
autoSelect:true,
readOnly:false,
allowblank:false,
width:50,
disabled: true,
queryMode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId', // numeric value is the key
'displayText'
],
data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
}),
listeners: {
'afterrender': function(combo) {
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('myId'));
},
'select': function (combo, records, eOpts)
{
Ext.getCmp('combobottom').setValue(combo.getValue());
grid.store.pageSize = combo.getValue();
userStore.loadPage(1);
}
},
valueField: 'myId',
displayField: 'displayText',
triggerAction: 'all'
}
],
emptyMsg: "No Clients to display"
},
{
xtype: 'pagingtoolbar',
store: userStore, // same store GridPanel is using
dock: 'top',
align:'center',
hideRefresh: true,
displayInfo: true,
listeners: {
'afterrender': function (component)
{
component.down('#refresh').hide()
},single: true
},
displayMsg: 'Clients {0} - {1} of {2}',
prependButtons: true,
items: [
{
xtype: 'label',
width:300
}
],
otherItems: [
{
xtype: 'combo',
itemId: 'combobottom',
id:'combobottom',
autoSelect:true,
readOnly:false,
allowblank:false,
width:50,
disabled: true,
queryMode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId', // numeric value is the key
'displayText'
],
data: [[50, '50'], [100, '100'],[150, '150'], [200, '200']] // data is local
}),
listeners: {
'afterrender': function(combo) {
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('myId'));
},
'select': function (combo, records, eOpts)
{
Ext.getCmp('combotop').setValue(combo.getValue());
grid.store.pageSize = combo.getValue();
userStore.loadPage(1);
}
},
valueField: 'myId',
displayField: 'displayText',
triggerAction: 'all'
}
],
emptyMsg: "No Clients to display"
},{
xtype: 'toolbar',
dock: 'top',
align:'center',
items: [{
text: 'Add Client',
iconCls: 'icon-add2',
minWidth : 100,
pressed: true,
handler: function(){
// empty record
// edit = this.editing;
//edit.cancelEdit();


rowEditing.cancelEdit();

var r = Ext.ModelManager.create({


firstName: '',
lastName:'',
companyName:'',
country:'',
govtOfficial:null



}, 'MeetingClients');


Ext.getCmp("govtOff").reset;

userStore.insert(0, r);
rowEditing.startEdit(0, 0);




}
},{
iconCls: 'icon-trash3',
pressed: true,
handler: function(){

selections = grid.getSelectionModel().getSelection();
var delArray='';
if(selections.length === 0){
alert('Atleast select one record to delete');
}
else if (selections) {
Ext.MessageBox.confirm('', 'Would you like to delete '+ selections.length +' Clients?', function(btn) {
if (btn == 'yes'){

//selected=grid.getSelectionModel().getSelection();

Ext.each(selections, function (item) {

//delArray.push(item.data.meetingClientId);
delArray = delArray +','+item.data.meetingClientId;
});

deleteSelected(delArray);
}
});
}

}
}] //items end
},

] //docked items end
})//Grid End

thanks in advance for your help