src/form/field/Radio.js

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