-/**
- * @class Ext.form.field.Radio
- * @extends Ext.form.field.Checkbox
-
-Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
-at a time within a group of radios with the same name.
-
-__Labeling:__
-In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
-may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
-see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
-
-__Values:__
-The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
+/*
-The following values will check the radio:
-* `true`
-* `'true'`
-* `'1'`
-* `'on'`
+This file is part of Ext JS 4
-Any other value will uncheck it.
+Copyright (c) 2011 Sencha Inc
-In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
-as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
-value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
-{@img Ext.form.Radio/Ext.form.Radio.png Ext.form.Radio component}
-__Example usage:__
+Contact: http://www.sencha.com/contact
- Ext.create('Ext.form.Panel', {
- title : 'Order Form',
- width : 300,
- bodyPadding: 10,
- renderTo : Ext.getBody(),
- items: [
- {
- xtype : 'fieldcontainer',
- fieldLabel : 'Size',
- defaultType: 'radiofield',
- defaults: {
- flex: 1
- },
- layout: 'hbox',
- items: [
- {
- boxLabel : 'M',
- name : 'size',
- inputValue: 'm',
- id : 'radio1'
- }, {
- boxLabel : 'L',
- name : 'size',
- inputValue: 'l',
- id : 'radio2'
- }, {
- boxLabel : 'XL',
- name : 'size',
- inputValue: 'xl',
- id : 'radio3'
- }
- ]
- },
- {
- xtype : 'fieldcontainer',
- fieldLabel : 'Color',
- defaultType: 'radiofield',
- defaults: {
- flex: 1
- },
- layout: 'hbox',
- items: [
- {
- boxLabel : 'Blue',
- name : 'color',
- inputValue: 'blue',
- id : 'radio4'
- }, {
- boxLabel : 'Grey',
- name : 'color',
- inputValue: 'grey',
- id : 'radio5'
- }, {
- boxLabel : 'Black',
- name : 'color',
- inputValue: 'black',
- id : 'radio6'
- }
- ]
- }
- ],
- bbar: [
- {
- text: 'Smaller Size',
- handler: function() {
- var radio1 = Ext.getCmp('radio1'),
- radio2 = Ext.getCmp('radio2'),
- radio3 = Ext.getCmp('radio3');
-
- //if L is selected, change to M
- if (radio2.getValue()) {
- radio1.setValue(true);
- return;
- }
-
- //if XL is selected, change to L
- if (radio3.getValue()) {
- radio2.setValue(true);
- return;
- }
-
- //if nothing is set, set size to S
- radio1.setValue(true);
- }
- },
- {
- text: 'Larger Size',
- handler: function() {
- var radio1 = Ext.getCmp('radio1'),
- radio2 = Ext.getCmp('radio2'),
- radio3 = Ext.getCmp('radio3');
-
- //if M is selected, change to L
- if (radio1.getValue()) {
- radio2.setValue(true);
- return;
- }
-
- //if L is selected, change to XL
- if (radio2.getValue()) {
- radio3.setValue(true);
- return;
- }
-
- //if nothing is set, set size to XL
- radio3.setValue(true);
- }
- },
- '-',
- {
- text: 'Select color',
- menu: {
- indent: false,
- items: [
- {
- text: 'Blue',
- handler: function() {
- var radio = Ext.getCmp('radio4');
- radio.setValue(true);
- }
- },
- {
- text: 'Grey',
- handler: function() {
- var radio = Ext.getCmp('radio5');
- radio.setValue(true);
- }
- },
- {
- text: 'Black',
- handler: function() {
- var radio = Ext.getCmp('radio6');
- radio.setValue(true);
- }
- }
- ]
- }
- }
- ]
- });
+GNU General Public License Usage
+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.
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
- * @constructor
- * Creates a new Radio
- * @param {Object} config Configuration options
- * @xtype radio
+*/
+/**
* @docauthor Robert Dougan <rob@sencha.com>
- * @markdown
+ *
+ * Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
+ * at a time within a group of radios with the same name.
+ *
+ * # Labeling
+ *
+ * In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
+ * may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
+ * see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
+ *
+ * # Values
+ *
+ * The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
+ *
+ * The following values will check the radio:
+ *
+ * - `true`
+ * - `'true'`
+ * - `'1'`
+ * - `'on'`
+ *
+ * Any other value will uncheck it.
+ *
+ * In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
+ * as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
+ * value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
+ *
+ * # Example usage
+ *
+ * @example
+ * Ext.create('Ext.form.Panel', {
+ * title : 'Order Form',
+ * width : 300,
+ * bodyPadding: 10,
+ * renderTo : Ext.getBody(),
+ * items: [
+ * {
+ * xtype : 'fieldcontainer',
+ * fieldLabel : 'Size',
+ * defaultType: 'radiofield',
+ * defaults: {
+ * flex: 1
+ * },
+ * layout: 'hbox',
+ * items: [
+ * {
+ * boxLabel : 'M',
+ * name : 'size',
+ * inputValue: 'm',
+ * id : 'radio1'
+ * }, {
+ * boxLabel : 'L',
+ * name : 'size',
+ * inputValue: 'l',
+ * id : 'radio2'
+ * }, {
+ * boxLabel : 'XL',
+ * name : 'size',
+ * inputValue: 'xl',
+ * id : 'radio3'
+ * }
+ * ]
+ * },
+ * {
+ * xtype : 'fieldcontainer',
+ * fieldLabel : 'Color',
+ * defaultType: 'radiofield',
+ * defaults: {
+ * flex: 1
+ * },
+ * layout: 'hbox',
+ * items: [
+ * {
+ * boxLabel : 'Blue',
+ * name : 'color',
+ * inputValue: 'blue',
+ * id : 'radio4'
+ * }, {
+ * boxLabel : 'Grey',
+ * name : 'color',
+ * inputValue: 'grey',
+ * id : 'radio5'
+ * }, {
+ * boxLabel : 'Black',
+ * name : 'color',
+ * inputValue: 'black',
+ * id : 'radio6'
+ * }
+ * ]
+ * }
+ * ],
+ * bbar: [
+ * {
+ * text: 'Smaller Size',
+ * handler: function() {
+ * var radio1 = Ext.getCmp('radio1'),
+ * radio2 = Ext.getCmp('radio2'),
+ * radio3 = Ext.getCmp('radio3');
+ *
+ * //if L is selected, change to M
+ * if (radio2.getValue()) {
+ * radio1.setValue(true);
+ * return;
+ * }
+ *
+ * //if XL is selected, change to L
+ * if (radio3.getValue()) {
+ * radio2.setValue(true);
+ * return;
+ * }
+ *
+ * //if nothing is set, set size to S
+ * radio1.setValue(true);
+ * }
+ * },
+ * {
+ * text: 'Larger Size',
+ * handler: function() {
+ * var radio1 = Ext.getCmp('radio1'),
+ * radio2 = Ext.getCmp('radio2'),
+ * radio3 = Ext.getCmp('radio3');
+ *
+ * //if M is selected, change to L
+ * if (radio1.getValue()) {
+ * radio2.setValue(true);
+ * return;
+ * }
+ *
+ * //if L is selected, change to XL
+ * if (radio2.getValue()) {
+ * radio3.setValue(true);
+ * return;
+ * }
+ *
+ * //if nothing is set, set size to XL
+ * radio3.setValue(true);
+ * }
+ * },
+ * '-',
+ * {
+ * text: 'Select color',
+ * menu: {
+ * indent: false,
+ * items: [
+ * {
+ * text: 'Blue',
+ * handler: function() {
+ * var radio = Ext.getCmp('radio4');
+ * radio.setValue(true);
+ * }
+ * },
+ * {
+ * text: 'Grey',
+ * handler: function() {
+ * var radio = Ext.getCmp('radio5');
+ * radio.setValue(true);
+ * }
+ * },
+ * {
+ * text: 'Black',
+ * handler: function() {
+ * var radio = Ext.getCmp('radio6');
+ * radio.setValue(true);
+ * }
+ * }
+ * ]
+ * }
+ * }
+ * ]
+ * });
*/
Ext.define('Ext.form.field.Radio', {
extend:'Ext.form.field.Checkbox',
},
/**
- * Sets either the checked/unchecked status of this Radio, or, if a string value
- * is passed, checks a sibling Radio of the same name whose value is the value specified.
- * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check.
+ * Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio
+ * of the same name whose value is the value specified.
+ * @param {String/Boolean} value Checked value, or the value of the sibling radio button to check.
* @return {Ext.form.field.Radio} this
*/
setValue: function(v) {
/**
* Returns the submit value for the checkbox which can be used when submitting forms.
- * @return {Boolean/null} True if checked, null if not.
+ * @return {Boolean/Object} True if checked, null if not.
*/
getSubmitValue: function() {
return this.checked ? this.inputValue : null;
},
+ getModelData: function() {
+ return this.getSubmitData();
+ },
+
// inherit docs
onChange: function(newVal, oldVal) {
var me = this;
}
},
- // inherit docs
- beforeDestroy: function(){
- this.callParent();
- this.getManager().removeAtKey(this.id);
- },
-
// inherit docs
getManager: function() {
return Ext.form.RadioManager;
}
});
+
git.ithinksw.org / extjs.git / blobdiff