docs/source/Radio.html

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