/** * 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): * * var form = Ext.create('Ext.form.Panel', { * 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: { // @inherit ui: 'radio', // @inherit component: { type: 'radio', cls: Ext.baseCSSPrefix + 'input-radio' } }, getValue: function() { return this._value; }, setValue: function(value) { this._value = value; return this; }, /** * 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; } } } });