X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..refs/heads/master:/docs/source/Radio.html diff --git a/docs/source/Radio.html b/docs/source/Radio.html index 61538020..d82d21ec 100644 --- a/docs/source/Radio.html +++ b/docs/source/Radio.html @@ -1,91 +1,280 @@ + + The source code - - + + + + - -
/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
/** - * @class Ext.form.Radio - * @extends Ext.form.Checkbox - * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type. - * Radio grouping is handled automatically by the browser if you give each radio in a group the same name. - * @constructor - * Creates a new Radio - * @param {Object} config Configuration options - * @xtype radio + +
/**
+ * @docauthor Robert Dougan <rob@sencha.com>
+ *
+ * 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.form.Radio = Ext.extend(Ext.form.Checkbox, {
-    inputType: 'radio',
+Ext.define('Ext.form.field.Radio', {
+    extend:'Ext.form.field.Checkbox',
+    alias: ['widget.radiofield', 'widget.radio'],
+    alternateClassName: 'Ext.form.Radio',
+    requires: ['Ext.form.RadioManager'],
 
-    
/** - * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide - * @method - */ - markInvalid : Ext.emptyFn, -
/** - * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide - * @method + isRadio: true, + + /** + * @cfg {String} uncheckedValue @hide */ - clearInvalid : Ext.emptyFn, -
/** - * If this radio is part of a group, it will return the selected value + // private + inputType: 'radio', + ariaRole: 'radio', + + /** + * If this radio is part of a group, it will return the selected value * @return {String} */ - getGroupValue : function(){ - var p = this.el.up('form') || Ext.getBody(); - var c = p.child('input[name='+this.el.dom.name+']:checked', true); - return c ? c.value : null; + getGroupValue: function() { + var selected = this.getManager().getChecked(this.name); + return selected ? selected.inputValue : null; }, - // private - onClick : function(){ - if(this.el.dom.checked != this.checked){ - var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']'); - els.each(function(el){ - if(el.dom.id == this.id){ - this.setValue(true); - }else{ - Ext.getCmp(el.dom.id).setValue(false); - } - }, this); - } + /** + * @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} this + /** + * 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){ - if (typeof v == 'boolean') { - Ext.form.Radio.superclass.setValue.call(this, v); + setValue: function(v) { + var me = this, + active; + + if (Ext.isBoolean(v)) { + me.callParent(arguments); } else { - var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true); - if(r){ - Ext.getCmp(r.id).setValue(true); + active = me.getManager().getWithValue(me.name, v).getAt(0); + if (active) { + active.setValue(true); } } - return this; + return me; }, - - // private - getCheckEl: function(){ - if(this.inGroup){ - return this.el.up('.x-form-radio-group') + + /** + * Returns the submit value for the checkbox which can be used when submitting forms. + * @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; + me.callParent(arguments); + + if (newVal) { + this.getManager().getByName(me.name).each(function(item){ + if (item !== me) { + item.setValue(false); + } + }, me); } - return this.el.up('form') || Ext.getBody(); + }, + + // inherit docs + getManager: function() { + return Ext.form.RadioManager; } }); -Ext.reg('radio', Ext.form.Radio);
- \ No newline at end of file +