X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/form/field/Radio.js diff --git a/src/form/field/Radio.js b/src/form/field/Radio.js new file mode 100644 index 00000000..82f6b34d --- /dev/null +++ b/src/form/field/Radio.js @@ -0,0 +1,267 @@ +/** + * @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 + * @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; + } +});