--- /dev/null
+/**
+ * @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'`
+
+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.
+{@img Ext.form.Radio/Ext.form.Radio.png Ext.form.Radio component}
+__Example usage:__
+
+ 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);
+ }
+ }
+ ]
+ }
+ }
+ ]
+ });
+
+
+ * @constructor
+ * Creates a new Radio
+ * @param {Object} config Configuration options
+ * @xtype radio
+ * @docauthor Robert Dougan <rob@sencha.com>
+ * @markdown
+ */
+Ext.define('Ext.form.field.Radio', {
+ extend:'Ext.form.field.Checkbox',
+ alias: ['widget.radiofield', 'widget.radio'],
+ alternateClassName: 'Ext.form.Radio',
+ requires: ['Ext.form.RadioManager'],
+
+ isRadio: true,
+
+ /**
+ * @cfg {String} uncheckedValue @hide
+ */
+
+ // private
+ inputType: 'radio',
+ ariaRole: 'radio',
+
+ /**
+ * If this radio is part of a group, it will return the selected value
+ * @return {String}
+ */
+ getGroupValue: function() {
+ var selected = this.getManager().getChecked(this.name);
+ return selected ? selected.inputValue : null;
+ },
+
+ /**
+ * @private Handle click on the radio button
+ */
+ onBoxClick: function(e) {
+ var me = this;
+ if (!me.disabled && !me.readOnly) {
+ this.setValue(true);
+ }
+ },
+
+ /**
+ * 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.
+ * @return {Ext.form.field.Radio} this
+ */
+ setValue: function(v) {
+ var me = this,
+ active;
+
+ if (Ext.isBoolean(v)) {
+ me.callParent(arguments);
+ } else {
+ active = me.getManager().getWithValue(me.name, v).getAt(0);
+ if (active) {
+ active.setValue(true);
+ }
+ }
+ return me;
+ },
+
+ /**
+ * Returns the submit value for the checkbox which can be used when submitting forms.
+ * @return {Boolean/null} True if checked, null if not.
+ */
+ getSubmitValue: function() {
+ return this.checked ? this.inputValue : null;
+ },
+
+ // inherit docs
+ onChange: function(newVal, oldVal) {
+ var me = this;
+ me.callParent(arguments);
+
+ if (newVal) {
+ this.getManager().getByName(me.name).each(function(item){
+ if (item !== me) {
+ item.setValue(false);
+ }
+ }, me);
+ }
+ },
+
+ // 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