2 * @class Ext.form.field.Radio
3 * @extends Ext.form.field.Checkbox
5 Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
6 at a time within a group of radios with the same name.
9 In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
10 may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
11 see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
14 The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
16 The following values will check the radio:
22 Any other value will uncheck it.
24 In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
25 as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
26 value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
27 {@img Ext.form.Radio/Ext.form.Radio.png Ext.form.Radio component}
30 Ext.create('Ext.form.Panel', {
34 renderTo : Ext.getBody(),
37 xtype : 'fieldcontainer',
39 defaultType: 'radiofield',
64 xtype : 'fieldcontainer',
66 defaultType: 'radiofield',
95 var radio1 = Ext.getCmp('radio1'),
96 radio2 = Ext.getCmp('radio2'),
97 radio3 = Ext.getCmp('radio3');
99 //if L is selected, change to M
100 if (radio2.getValue()) {
101 radio1.setValue(true);
105 //if XL is selected, change to L
106 if (radio3.getValue()) {
107 radio2.setValue(true);
111 //if nothing is set, set size to S
112 radio1.setValue(true);
117 handler: function() {
118 var radio1 = Ext.getCmp('radio1'),
119 radio2 = Ext.getCmp('radio2'),
120 radio3 = Ext.getCmp('radio3');
122 //if M is selected, change to L
123 if (radio1.getValue()) {
124 radio2.setValue(true);
128 //if L is selected, change to XL
129 if (radio2.getValue()) {
130 radio3.setValue(true);
134 //if nothing is set, set size to XL
135 radio3.setValue(true);
140 text: 'Select color',
146 handler: function() {
147 var radio = Ext.getCmp('radio4');
148 radio.setValue(true);
153 handler: function() {
154 var radio = Ext.getCmp('radio5');
155 radio.setValue(true);
160 handler: function() {
161 var radio = Ext.getCmp('radio6');
162 radio.setValue(true);
173 * Creates a new Radio
174 * @param {Object} config Configuration options
176 * @docauthor Robert Dougan <rob@sencha.com>
179 Ext.define('Ext.form.field.Radio', {
180 extend:'Ext.form.field.Checkbox',
181 alias: ['widget.radiofield', 'widget.radio'],
182 alternateClassName: 'Ext.form.Radio',
183 requires: ['Ext.form.RadioManager'],
188 * @cfg {String} uncheckedValue @hide
196 * If this radio is part of a group, it will return the selected value
199 getGroupValue: function() {
200 var selected = this.getManager().getChecked(this.name);
201 return selected ? selected.inputValue : null;
205 * @private Handle click on the radio button
207 onBoxClick: function(e) {
209 if (!me.disabled && !me.readOnly) {
215 * Sets either the checked/unchecked status of this Radio, or, if a string value
216 * is passed, checks a sibling Radio of the same name whose value is the value specified.
217 * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check.
218 * @return {Ext.form.field.Radio} this
220 setValue: function(v) {
224 if (Ext.isBoolean(v)) {
225 me.callParent(arguments);
227 active = me.getManager().getWithValue(me.name, v).getAt(0);
229 active.setValue(true);
236 * Returns the submit value for the checkbox which can be used when submitting forms.
237 * @return {Boolean/null} True if checked, null if not.
239 getSubmitValue: function() {
240 return this.checked ? this.inputValue : null;
244 onChange: function(newVal, oldVal) {
246 me.callParent(arguments);
249 this.getManager().getByName(me.name).each(function(item){
251 item.setValue(false);
258 beforeDestroy: function(){
260 this.getManager().removeAtKey(this.id);
264 getManager: function() {
265 return Ext.form.RadioManager;