/** * 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): * ```javascript * @example({ framework: 'extjs' }) * 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' * } * ] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtFormPanel, ExtRadioField, ExtFieldSet } from '@sencha/ext-react'; * const radioProps = { * name: 'radios' * }; * * export default class MyExample extends Component { * render() { * return ( * <ExtContainer layout="center"> * <ExtFormPanel shadow layout={{type: 'vbox', align: 'left'}}> * <ExtRadioField {...radioProps} boxLabel="Checked" value="checked" * checked/> * <ExtRadioField {...radioProps} boxLabel="Unchecked" * value="unchecked"/> * <ExtRadioField {...radioProps} boxLabel="Disabled" * value="disabled" disabled/> * </ExtFormPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer layout="center"> * <ExtFormPanel shadow="true" * [layout]="{type: 'vbox', align: 'left'}"> * <ExtRadioField name="radios" boxLabel="Checked" value="checked" * checked="true"></ExtRadioField> * <ExtRadioField name="radios" boxLabel="Unchecked" * value="unchecked"></ExtRadioField> * <ExtRadioField name="radios" boxLabel="Disabled" * value="disabled" disabled="true"></ExtRadioField> * </ExtFormPanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container layout="center"> * <ext-formpanel * shadow="true" * layout='{"type": "vbox", "align": "left"}' * > * <ext-radiofield * name="radios" * boxLabel="Checked" * value="checked" * checked="true" * > * </ext-radiofield> * <ext-radiofield * name="radios" * boxLabel="Unchecked" * value="unchecked" * > * </ext-radiofield> * <ext-radiofield * name="radios" * boxLabel="Disabled" * value="disabled" * disabled="true" * > * </ext-radiofield> * </ext-formpanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-radiofield.component'; * * export default class RadioFieldComponent {} * ``` * * 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: [ 'radio', 'radiofield' ], alternateClassName: 'Ext.form.Radio', isRadio: true, inputType: 'radio', 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); } }, /** * 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; }, /** * return all radio fields with same name in nameHolder */ getSameGroupFields: function() { var me = this, component = me.lookupNameHolder(), name = me.name.replace(me.qsaLeftRe, '\\[').replace(me.qsaRightRe, '\\]'); return component.query('radiofield[name=' + name + ']'); }, /** * 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); } } }});