PDA

View Full Version : form.load does not reset radiogroup



oger000
15 Jun 2011, 1:26 AM
If the value provided via form.load for a radiogroup does not match any inputValue of the containing radios (or is null or empty) the radiogroup remains in the state it was before the form.load. That means if one radio is checked that radio remains checked but should be unchecked as it was in ext3.

I would expect that all radios of the radiogroup would be unchecked in such a case.

oger000
17 Jun 2011, 1:48 AM
Cycle through the store. The third record do not match any radio, but the form shows a match.



Ext.onReady(function() {


var currentId = 0;

var store = Ext.create('Ext.data.Store', {
fields: [ 'id', 'text1', 'radio1' ],
data: [
{ id: 1, text1: 'text1', radio1: 'C1' },
{ id: 2, text1: 'text2', radio1: 'C2' },
{ id: 3, text1: 'text3', radio1: 'C3' },
]
});


var form = Ext.create('Ext.form.Panel', {
bodyPadding: 15,
trackResetOnLoad: true,
items: [
{ xtype: 'textfield', fieldLabel: 'Text', name: 'text1' },
{ xtype: 'radiogroup', fieldLabel: 'Radiogroup',
items: [ { boxLabel: 'choice1', name: 'radio1', inputValue: 'C1' },
{ boxLabel: 'choice2', name: 'radio1', inputValue: 'C2' } ]
},
],
});


var win = Ext.create('Ext.window.Window', {
title: 'radiogroup demo1',
height: 200, width: 400,
layout: 'fit',
items: [ form ],
buttons: [
{ text: 'Next',
handler: function(button, event) {
if (++currentId > 3) { currentId = 1; }
form.loadRecord(store.getById(currentId));
}
},
]
});

win.show();

});

SunnySven
17 Jun 2011, 4:54 AM
Insert a


form.getForm().reset();

above your


form.loadRecord(store.getById(currentId));

oger000
19 Jun 2011, 7:39 AM
Thank you sunnySven.

Your workaround is short and elegant and works for the given example but does not cover other cases. If you change the first two records in the store the third record does not reset to empty. This is because of the trackResetOnLoad bug of the radios, but this is another story.



{ id: 1, text1: 'text2', radio1: 'C2' },
{ id: 2, text1: 'text1', radio1: 'C1' },


But it lead me to another workaround that should be a little more stable:


/*
* Empty all fields of a form
* @form: Form for which the fields should be set to empty
* Works for date fields too, even if null would be the correct empty value.
*/
Oger.extjs.emptyForm = function(form) {

if (!form) {
return;
}

// if a form panel is given than get the underlaying basic form
if (typeof form.getForm == 'function') {
form = form.getForm();
}

var processField = function(field) {
if (field.getXType() == 'radiogroup' || field.getXType() == 'checkboxgroup' ) {
// group items are separate fields so handling of group is not necessary
}
else if (field.getXType() == 'radiofield' || field.getXType() == 'checkboxfield') {
field.setValue(false);
}
else {
field.setValue('');
}
};

form.getFields().each(processField);
}; // eo empty form