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-method-constructor'><span id='Ext-form-field-Radio'>/**
  19 </span></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  * @constructor
 190  * Creates a new Radio
 191  * @param {Object} config Configuration options
 192  * @xtype radio
 193  * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
 194  * @markdown
 195  */
 196 Ext.define('Ext.form.field.Radio', {
 197     extend:'Ext.form.field.Checkbox',
 198     alias: ['widget.radiofield', 'widget.radio'],
 199     alternateClassName: 'Ext.form.Radio',
 200     requires: ['Ext.form.RadioManager'],
 201
 202     isRadio: true,
 203
 204 <span id='Ext-form-field-Radio-cfg-uncheckedValue'>    /**
 205 </span>     * @cfg {String} uncheckedValue @hide
 206      */
 207
 208     // private
 209     inputType: 'radio',
 210     ariaRole: 'radio',
 211
 212 <span id='Ext-form-field-Radio-method-getGroupValue'>    /**
 213 </span>     * If this radio is part of a group, it will return the selected value
 214      * @return {String}
 215      */
 216     getGroupValue: function() {
 217         var selected = this.getManager().getChecked(this.name);
 218         return selected ? selected.inputValue : null;
 219     },
 220
 221 <span id='Ext-form-field-Radio-method-onBoxClick'>    /**
 222 </span>     * @private Handle click on the radio button
 223      */
 224     onBoxClick: function(e) {
 225         var me = this;
 226         if (!me.disabled &amp;&amp; !me.readOnly) {
 227             this.setValue(true);
 228         }
 229     },
 230
 231 <span id='Ext-form-field-Radio-method-setValue'>    /**
 232 </span>     * Sets either the checked/unchecked status of this Radio, or, if a string value
 233      * is passed, checks a sibling Radio of the same name whose value is the value specified.
 234      * @param value {String/Boolean} Checked value, or the value of the sibling radio button to check.
 235      * @return {Ext.form.field.Radio} this
 236      */
 237     setValue: function(v) {
 238         var me = this,
 239             active;
 240
 241         if (Ext.isBoolean(v)) {
 242             me.callParent(arguments);
 243         } else {
 244             active = me.getManager().getWithValue(me.name, v).getAt(0);
 245             if (active) {
 246                 active.setValue(true);
 247             }
 248         }
 249         return me;
 250     },
 251
 252 <span id='Ext-form-field-Radio-method-getSubmitValue'>    /**
 253 </span>     * Returns the submit value for the checkbox which can be used when submitting forms.
 254      * @return {Boolean/null} True if checked, null if not.
 255      */
 256     getSubmitValue: function() {
 257         return this.checked ? this.inputValue : null;
 258     },
 259
 260     getModelData: function() {
 261         return this.getSubmitData();
 262     },
 263
 264     // inherit docs
 265     onChange: function(newVal, oldVal) {
 266         var me = this;
 267         me.callParent(arguments);
 268
 269         if (newVal) {
 270             this.getManager().getByName(me.name).each(function(item){
 271                 if (item !== me) {
 272                     item.setValue(false);
 273                 }
 274             }, me);
 275         }
 276     },
 277
 278     // inherit docs
 279     beforeDestroy: function(){
 280         this.callParent();
 281         this.getManager().removeAtKey(this.id);
 282     },
 283
 284     // inherit docs
 285     getManager: function() {
 286         return Ext.form.RadioManager;
 287     }
 288 });
 289 </pre>
 290 </body>
 291 </html>