/** * The radio field is an enhanced version of the native browser radio controls and is a good way of allowing your user * to choose one option out of a selection of several (for example, choosing a favorite color): * * @example * var form = Ext.create('Ext.form.Panel', { * fullscreen: true, * items: [ * { * xtype: 'radiofield', * name : 'color', * value: 'red', * label: 'Red', * checked: true * }, * { * xtype: 'radiofield', * name : 'color', * value: 'green', * label: 'Green' * }, * { * xtype: 'radiofield', * name : 'color', * value: 'blue', * label: 'Blue' * } * ] * }); * * Above we created a simple form which allows the user to pick a color from the options red, green and blue. Because * we gave each of the fields above the same {@link #name}, the radio field ensures that only one of them can be * checked at a time. When we come to get the values out of the form again or submit it to the server, only 1 value * will be sent for each group of radio fields with the same name: * * form.getValues(); //looks like {color: 'red'} * form.submit(); //sends a single field back to the server (in this case color: red) * */Ext.define('Ext.field.Radio', { extend: 'Ext.field.Checkbox', xtype: 'radiofield', alternateClassName: 'Ext.form.Radio', isRadio: true, config: { /** * @cfg * @inheritdoc */ component: { xtype: 'radioinput' } }, classCls: Ext.baseCSSPrefix + 'radiofield', getValue: function() { return this._value === undefined ? null : this._value; }, setValue: function(value) { this._value = value; return this; }, getSubmitValue: function() { var value = this._value; if (value === undefined || value === null) { value = true; } return (this.getChecked()) ? value : null; }, updateChecked: function(checked, oldChecked) { var me = this; me.callParent([checked, oldChecked]); if (me.initialized && checked) { me.refreshGroupValues(me); } }, /** * @private */ onMaskTap: function(component, e) { var me = this, dom = me.getComponent().inputElement.dom; if (me.getDisabled()) { return false; } me.setChecked(true); //return false so the mask does not disappear return false; }, /** * Returns the selected value if this radio is part of a group (other radio fields with the same name, in the same FormPanel), * @return {String} */ getGroupValue: function() { var fields = this.getSameGroupFields(), ln = fields.length, i = 0, field; for (; i < ln; i++) { field = fields[i]; if (field.getChecked()) { return field.getValue(); } } return null; }, /** * Set the matched radio field's status (that has the same value as the given string) to checked. * @param {String} value The value of the radio field to check. * @return {Ext.field.Radio} The field that is checked. */ setGroupValue: function(value) { var fields = this.getSameGroupFields(), ln = fields.length, i = 0, field; for (; i < ln; i++) { field = fields[i]; if (field.getValue() === value) { field.setChecked(true); return field; } } }, /** * Loops through each of the fields this radiofield is linked to (has the same name) and * calls `onChange` on those fields so the appropriate event is fired. * @private */ refreshGroupValues: function(trigger) { var fields = this.getSameGroupFields(), ln = fields.length, i = 0, field; for (; i < ln; i++) { field = fields[i]; if (field !== trigger) { field.setChecked(false); } } }});