git.roojs.org Git - roojs1/blob - Roo/bootstrap/Radio.js

   1 /*
   2  * - LGPL
   3  *
   4  * Radio
   5  *
   6  *
   7  * not inline
   8  *<div class="radio">
   9   <label>
  10     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  11     Option one is this and that&mdash;be sure to include why it's great
  12   </label>
  13 </div>
  14  *
  15  *
  16  *inline
  17  *<span>
  18  *<label class="radio-inline">fieldLabel</label>
  19  *<label class="radio-inline">
  20   <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
  21 </label>
  22 <span>
  23  *
  24  *
  25  */
  26
  27 /**
  28  * @class Roo.bootstrap.Radio
  29  * @extends Roo.bootstrap.CheckBox
  30  * Bootstrap Radio class
  31
  32  * @constructor
  33  * Create a new Radio
  34  * @param {Object} config The config object
  35  */
  36
  37 Roo.bootstrap.Radio = function(config){
  38     Roo.bootstrap.Radio.superclass.constructor.call(this, config);
  39
  40 };
  41
  42 Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.CheckBox,  {
  43
  44     inputType: 'radio',
  45     inputValue: '',
  46     valueOff: '',
  47
  48     getAutoCreate : function()
  49     {
  50         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  51         align = align || 'left'; // default...
  52
  53
  54
  55         var id = Roo.id();
  56
  57         var cfg = { tag : 'span' };
  58
  59         var inline = this.inline ? 'radio-inline' : '';
  60
  61         var lbl = {
  62                 tag: 'label' ,
  63                 // does not need for, as we wrap the input with it..
  64                 cls : 'control-label ' + inline,
  65                 html : boxLabel
  66
  67         };
  68
  69         var fieldLabel = {
  70             tag: 'label' ,
  71             cls : 'control-label' + inline,
  72             html : this.fieldLabel
  73         }
  74         cfg.cls = 'form-group radio' //input-group
  75
  76         if (this.inline) {
  77             cfg.cls  += " radio-inline";
  78         }
  79
  80
  81         var input =  {
  82             tag: 'input',
  83             id : id,
  84             type : this.inputType,
  85             //value : (!this.checked) ? this.valueOff : this.inputValue,
  86             value : this.inputValue,
  87             cls : 'roo-radio',
  88             placeholder : this.placeholder || ''
  89
  90         };
  91           if (this.weight) { // Validity check?
  92             cfg.cls += " radio-" + this.weight;
  93         }
  94         if (this.disabled) {
  95             input.disabled=true;
  96         }
  97
  98         if(this.checked){
  99             input.checked = this.checked;
 100         }
 101
 102         if (this.name) {
 103             input.name = this.name;
 104         }
 105
 106         if (this.size) {
 107             input.cls += ' input-' + this.size;
 108         }
 109
 110         var settings=this;
 111         ['xs','sm','md','lg'].map(function(size){
 112             if (settings[size]) {
 113                 cfg.cls += ' col-' + size + '-' + settings[size];
 114             }
 115         });
 116
 117         var inputblock = input;
 118
 119         if (this.before || this.after) {
 120
 121             inputblock = {
 122                 cls : 'input-group',
 123                 tag : 'span',
 124                 cn :  []
 125             };
 126             if (this.before) {
 127                 inputblock.cn.push({
 128                     tag :'span',
 129                     cls : 'input-group-addon',
 130                     html : this.before
 131                 });
 132             }
 133             inputblock.cn.push(input);
 134             if (this.after) {
 135                 inputblock.cn.push({
 136                     tag :'span',
 137                     cls : 'input-group-addon',
 138                     html : this.after
 139                 });
 140             }
 141
 142         };
 143
 144         var lbl = {
 145                 tag: 'label' ,
 146                 'for' :  id,
 147                 cls : 'control-label radio-inline',
 148
 149                 html : this.fieldLabel
 150
 151         };
 152         if (this.boxLabel) {
 153             this.labelWidth = this.labelWidth  || 100;
 154             lbl.style =  'width: ' + (this.labelWidth *1) +'px';
 155             lbl.tag = 'span';
 156             lbl['for'] = '';
 157
 158
 159         }
 160
 161
 162         if (align ==='left' && this.fieldLabel.length) {
 163                 Roo.log("left and has label");
 164
 165
 166
 167                 cfg.cn = [
 168
 169                     lbl,
 170                     {
 171                         tag: 'span',
 172                         cls : 'radio-inline',
 173                         cn: [
 174                             inputblock
 175                         ]
 176                     }
 177
 178                 ];
 179         } else if ( this.fieldLabel.length) {
 180                 Roo.log(" label");
 181                 lbl.cls = '';
 182
 183                  cfg.cn = [  lbl,    inputblock ];
 184
 185         } else {
 186
 187                    Roo.log(" no label && no align");
 188                 cfg.cn = [
 189
 190                         inputblock
 191
 192                 ];
 193
 194
 195         };
 196
 197         if(this.boxLabel){
 198             cfg.cn.push({
 199                 tag: 'label',
 200                 'for': id,
 201                 cls: 'box-label',
 202                 html: this.boxLabel
 203             })
 204         }
 205
 206         return cfg;
 207
 208     },
 209     inputEl: function ()
 210     {
 211         return this.el.select('input.roo-radio',true).first();
 212     },
 213     onClick : function()
 214     {
 215         Roo.log("click");
 216         Roo.log("click");
 217         this.setChecked(true);
 218     },
 219
 220     setChecked : function(state,suppressEvent)
 221     {
 222         if(state){
 223             Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
 224                 v.dom.checked = false;
 225             });
 226         }
 227
 228         this.checked = state;
 229         this.inputEl().dom.checked = state;
 230
 231         if(suppressEvent !== true){
 232             this.fireEvent('check', this, state);
 233         }
 234
 235         //this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
 236
 237     },
 238
 239     getGroupValue : function()
 240     {
 241         var value = ''
 242         Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
 243             if(v.dom.checked == true){
 244                 value = v.dom.value;
 245             }
 246         });
 247
 248         return value;
 249     },
 250
 251     /**
 252      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
 253      * @return {Mixed} value The field value
 254      */
 255     getValue : function(){
 256         return this.getGroupValue();
 257     }
 258
 259 });
 260
 261