docs/source/Radio.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-field-Radio'>/**
  19 </span> * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
  20  *
  21  * Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
  22  * at a time within a group of radios with the same name.
  23  *
  24  * # Labeling
  25  *
  26  * In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
  27  * may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
  28  * see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
  29  *
  30  * # Values
  31  *
  32  * The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
  33  *
  34  * The following values will check the radio:
  35  *
  36  * - `true`
  37  * - `'true'`
  38  * - `'1'`
  39  * - `'on'`
  40  *
  41  * Any other value will uncheck it.
  42  *
  43  * In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
  44  * as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
  45  * value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
  46  *
  47  * # Example usage
  48  *
  49  *     @example
  50  *     Ext.create('Ext.form.Panel', {
  51  *         title      : 'Order Form',
  52  *         width      : 300,
  53  *         bodyPadding: 10,
  54  *         renderTo   : Ext.getBody(),
  55  *         items: [
  56  *             {
  57  *                 xtype      : 'fieldcontainer',
  58  *                 fieldLabel : 'Size',
  59  *                 defaultType: 'radiofield',
  60  *                 defaults: {
  61  *                     flex: 1
  62  *                 },
  63  *                 layout: 'hbox',
  64  *                 items: [
  65  *                     {
  66  *                         boxLabel  : 'M',
  67  *                         name      : 'size',
  68  *                         inputValue: 'm',
  69  *                         id        : 'radio1'
  70  *                     }, {
  71  *                         boxLabel  : 'L',
  72  *                         name      : 'size',
  73  *                         inputValue: 'l',
  74  *                         id        : 'radio2'
  75  *                     }, {
  76  *                         boxLabel  : 'XL',
  77  *                         name      : 'size',
  78  *                         inputValue: 'xl',
  79  *                         id        : 'radio3'
  80  *                     }
  81  *                 ]
  82  *             },
  83  *             {
  84  *                 xtype      : 'fieldcontainer',
  85  *                 fieldLabel : 'Color',
  86  *                 defaultType: 'radiofield',
  87  *                 defaults: {
  88  *                     flex: 1
  89  *                 },
  90  *                 layout: 'hbox',
  91  *                 items: [
  92  *                     {
  93  *                         boxLabel  : 'Blue',
  94  *                         name      : 'color',
  95  *                         inputValue: 'blue',
  96  *                         id        : 'radio4'
  97  *                     }, {
  98  *                         boxLabel  : 'Grey',
  99  *                         name      : 'color',
 100  *                         inputValue: 'grey',
 101  *                         id        : 'radio5'
 102  *                     }, {
 103  *                         boxLabel  : 'Black',
 104  *                         name      : 'color',
 105  *                         inputValue: 'black',
 106  *                         id        : 'radio6'
 107  *                     }
 108  *                 ]
 109  *             }
 110  *         ],
 111  *         bbar: [
 112  *             {
 113  *                 text: 'Smaller Size',
 114  *                 handler: function() {
 115  *                     var radio1 = Ext.getCmp('radio1'),
 116  *                         radio2 = Ext.getCmp('radio2'),
 117  *                         radio3 = Ext.getCmp('radio3');
 118  *
 119  *                     //if L is selected, change to M
 120  *                     if (radio2.getValue()) {
 121  *                         radio1.setValue(true);
 122  *                         return;
 123  *                     }
 124  *
 125  *                     //if XL is selected, change to L
 126  *                     if (radio3.getValue()) {
 127  *                         radio2.setValue(true);
 128  *                         return;
 129  *                     }
 130  *
 131  *                     //if nothing is set, set size to S
 132  *                     radio1.setValue(true);
 133  *                 }
 134  *             },
 135  *             {
 136  *                 text: 'Larger Size',
 137  *                 handler: function() {
 138  *                     var radio1 = Ext.getCmp('radio1'),
 139  *                         radio2 = Ext.getCmp('radio2'),
 140  *                         radio3 = Ext.getCmp('radio3');
 141  *
 142  *                     //if M is selected, change to L
 143  *                     if (radio1.getValue()) {
 144  *                         radio2.setValue(true);
 145  *                         return;
 146  *                     }
 147  *
 148  *                     //if L is selected, change to XL
 149  *                     if (radio2.getValue()) {
 150  *                         radio3.setValue(true);
 151  *                         return;
 152  *                     }
 153  *
 154  *                     //if nothing is set, set size to XL
 155  *                     radio3.setValue(true);
 156  *                 }
 157  *             },
 158  *             '-',
 159  *             {
 160  *                 text: 'Select color',
 161  *                 menu: {
 162  *                     indent: false,
 163  *                     items: [
 164  *                         {
 165  *                             text: 'Blue',
 166  *                             handler: function() {
 167  *                                 var radio = Ext.getCmp('radio4');
 168  *                                 radio.setValue(true);
 169  *                             }
 170  *                         },
 171  *                         {
 172  *                             text: 'Grey',
 173  *                             handler: function() {
 174  *                                 var radio = Ext.getCmp('radio5');
 175  *                                 radio.setValue(true);
 176  *                             }
 177  *                         },
 178  *                         {
 179  *                             text: 'Black',
 180  *                             handler: function() {
 181  *                                 var radio = Ext.getCmp('radio6');
 182  *                                 radio.setValue(true);
 183  *                             }
 184  *                         }
 185  *                     ]
 186  *                 }
 187  *             }
 188  *         ]
 189  *     });
 190  */
 191 Ext.define('Ext.form.field.Radio', {
 192     extend:'Ext.form.field.Checkbox',
 193     alias: ['widget.radiofield', 'widget.radio'],
 194     alternateClassName: 'Ext.form.Radio',
 195     requires: ['Ext.form.RadioManager'],
 196
 197     isRadio: true,
 198
 199 <span id='Ext-form-field-Radio-cfg-uncheckedValue'>    /**
 200 </span>     * @cfg {String} uncheckedValue @hide
 201      */
 202
 203     // private
 204     inputType: 'radio',
 205     ariaRole: 'radio',
 206
 207 <span id='Ext-form-field-Radio-method-getGroupValue'>    /**
 208 </span>     * If this radio is part of a group, it will return the selected value
 209      * @return {String}
 210      */
 211     getGroupValue: function() {
 212         var selected = this.getManager().getChecked(this.name);
 213         return selected ? selected.inputValue : null;
 214     },
 215
 216 <span id='Ext-form-field-Radio-method-onBoxClick'>    /**
 217 </span>     * @private Handle click on the radio button
 218      */
 219     onBoxClick: function(e) {
 220         var me = this;
 221         if (!me.disabled &amp;&amp; !me.readOnly) {
 222             this.setValue(true);
 223         }
 224     },
 225
 226 <span id='Ext-form-field-Radio-method-setValue'>    /**
 227 </span>     * Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio
 228      * of the same name whose value is the value specified.
 229      * @param {String/Boolean} value Checked value, or the value of the sibling radio button to check.
 230      * @return {Ext.form.field.Radio} this
 231      */
 232     setValue: function(v) {
 233         var me = this,
 234             active;
 235
 236         if (Ext.isBoolean(v)) {
 237             me.callParent(arguments);
 238         } else {
 239             active = me.getManager().getWithValue(me.name, v).getAt(0);
 240             if (active) {
 241                 active.setValue(true);
 242             }
 243         }
 244         return me;
 245     },
 246
 247 <span id='Ext-form-field-Radio-method-getSubmitValue'>    /**
 248 </span>     * Returns the submit value for the checkbox which can be used when submitting forms.
 249      * @return {Boolean/Object} True if checked, null if not.
 250      */
 251     getSubmitValue: function() {
 252         return this.checked ? this.inputValue : null;
 253     },
 254
 255     getModelData: function() {
 256         return this.getSubmitData();
 257     },
 258
 259     // inherit docs
 260     onChange: function(newVal, oldVal) {
 261         var me = this;
 262         me.callParent(arguments);
 263
 264         if (newVal) {
 265             this.getManager().getByName(me.name).each(function(item){
 266                 if (item !== me) {
 267                     item.setValue(false);
 268                 }
 269             }, me);
 270         }
 271     },
 272
 273     // inherit docs
 274     getManager: function() {
 275         return Ext.form.RadioManager;
 276     }
 277 });
 278 </pre>
 279 </body>
 280 </html>