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