3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @docauthor Robert Dougan <rob@sencha.com>
18 * Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
19 * at a time within a group of radios with the same name.
23 * In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
24 * may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
25 * see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
29 * The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
31 * The following values will check the radio:
38 * Any other value will uncheck it.
40 * In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
41 * as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
42 * value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
47 * Ext.create('Ext.form.Panel', {
48 * title : 'Order Form',
51 * renderTo : Ext.getBody(),
54 * xtype : 'fieldcontainer',
55 * fieldLabel : 'Size',
56 * defaultType: 'radiofield',
81 * xtype : 'fieldcontainer',
82 * fieldLabel : 'Color',
83 * defaultType: 'radiofield',
100 * boxLabel : 'Black',
102 * inputValue: 'black',
110 * text: 'Smaller Size',
111 * handler: function() {
112 * var radio1 = Ext.getCmp('radio1'),
113 * radio2 = Ext.getCmp('radio2'),
114 * radio3 = Ext.getCmp('radio3');
116 * //if L is selected, change to M
117 * if (radio2.getValue()) {
118 * radio1.setValue(true);
122 * //if XL is selected, change to L
123 * if (radio3.getValue()) {
124 * radio2.setValue(true);
128 * //if nothing is set, set size to S
129 * radio1.setValue(true);
133 * text: 'Larger Size',
134 * handler: function() {
135 * var radio1 = Ext.getCmp('radio1'),
136 * radio2 = Ext.getCmp('radio2'),
137 * radio3 = Ext.getCmp('radio3');
139 * //if M is selected, change to L
140 * if (radio1.getValue()) {
141 * radio2.setValue(true);
145 * //if L is selected, change to XL
146 * if (radio2.getValue()) {
147 * radio3.setValue(true);
151 * //if nothing is set, set size to XL
152 * radio3.setValue(true);
157 * text: 'Select color',
163 * handler: function() {
164 * var radio = Ext.getCmp('radio4');
165 * radio.setValue(true);
170 * handler: function() {
171 * var radio = Ext.getCmp('radio5');
172 * radio.setValue(true);
177 * handler: function() {
178 * var radio = Ext.getCmp('radio6');
179 * radio.setValue(true);
188 Ext.define('Ext.form.field.Radio', {
189 extend:'Ext.form.field.Checkbox',
190 alias: ['widget.radiofield', 'widget.radio'],
191 alternateClassName: 'Ext.form.Radio',
192 requires: ['Ext.form.RadioManager'],
197 * @cfg {String} uncheckedValue @hide
205 * If this radio is part of a group, it will return the selected value
208 getGroupValue: function() {
209 var selected = this.getManager().getChecked(this.name);
210 return selected ? selected.inputValue : null;
214 * @private Handle click on the radio button
216 onBoxClick: function(e) {
218 if (!me.disabled && !me.readOnly) {
224 * Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio
225 * of the same name whose value is the value specified.
226 * @param {String/Boolean} value Checked value, or the value of the sibling radio button to check.
227 * @return {Ext.form.field.Radio} this
229 setValue: function(v) {
233 if (Ext.isBoolean(v)) {
234 me.callParent(arguments);
236 active = me.getManager().getWithValue(me.name, v).getAt(0);
238 active.setValue(true);
245 * Returns the submit value for the checkbox which can be used when submitting forms.
246 * @return {Boolean/Object} True if checked, null if not.
248 getSubmitValue: function() {
249 return this.checked ? this.inputValue : null;
252 getModelData: function() {
253 return this.getSubmitData();
257 onChange: function(newVal, oldVal) {
259 me.callParent(arguments);
262 this.getManager().getByName(me.name).each(function(item){
264 item.setValue(false);
271 getManager: function() {
272 return Ext.form.RadioManager;