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 = {
  58                 tag : this.inline ? 'span' : 'div',
  59                 cn : []
  60         };
  61
  62         var inline = this.inline ? 'radio-inline' : '';
  63
  64         var lbl = {
  65                 tag: 'label' ,
  66                 // does not need for, as we wrap the input with it..
  67                 cls : 'control-label ' + inline,
  68                 cn : []
  69         };
  70
  71         var fieldLabel = {
  72             tag: 'label' ,
  73             cls : 'control-label' + inline,
  74             html : this.fieldLabel
  75         }
  76
  77
  78
  79
  80         var input =  {
  81             tag: 'input',
  82             id : id,
  83             type : this.inputType,
  84             //value : (!this.checked) ? this.valueOff : this.inputValue,
  85             value : this.inputValue,
  86             cls : 'roo-radio',
  87             placeholder : this.placeholder || '' // ?? needed????
  88
  89         };
  90         if (this.weight) { // Validity check?
  91             input.cls += " radio-" + this.weight;
  92         }
  93         if (this.disabled) {
  94             input.disabled=true;
  95         }
  96
  97         if(this.checked){
  98             input.checked = this.checked;
  99         }
 100
 101         if (this.name) {
 102             input.name = this.name;
 103         }
 104
 105         if (this.size) {
 106             input.cls += ' input-' + this.size;
 107         }
 108
 109         //?? can span's inline have a width??
 110
 111         var settings=this;
 112         ['xs','sm','md','lg'].map(function(size){
 113             if (settings[size]) {
 114                 cfg.cls += ' col-' + size + '-' + settings[size];
 115             }
 116         });
 117
 118         var inputblock = input;
 119
 120         if (this.before || this.after) {
 121
 122             inputblock = {
 123                 cls : 'input-group',
 124                 tag : 'span',
 125                 cn :  []
 126             };
 127             if (this.before) {
 128                 inputblock.cn.push({
 129                     tag :'span',
 130                     cls : 'input-group-addon',
 131                     html : this.before
 132                 });
 133             }
 134             inputblock.cn.push(input);
 135             if (this.after) {
 136                 inputblock.cn.push({
 137                     tag :'span',
 138                     cls : 'input-group-addon',
 139                     html : this.after
 140                 });
 141             }
 142
 143         };
 144
 145
 146         if (this.fieldLabel && this.fieldLabel.length) {
 147             cfg.cn.push(fieldLabel);
 148         }
 149
 150
 151         if (align ==='left' && this.fieldLabel.length) {
 152                 Roo.log("left and has label");
 153
 154
 155
 156                 cfg.cn = [
 157
 158                     lbl,
 159                     {
 160                         tag: 'span',
 161                         cls : 'radio-inline',
 162                         cn: [
 163                             inputblock
 164                         ]
 165                     }
 166
 167                 ];
 168         } else if ( this.fieldLabel.length) {
 169                 Roo.log(" label");
 170                 lbl.cls = '';
 171
 172                  cfg.cn = [  lbl,    inputblock ];
 173
 174         } else {
 175
 176                    Roo.log(" no label && no align");
 177                 cfg.cn = [
 178
 179                         inputblock
 180
 181                 ];
 182
 183
 184         };
 185
 186         if(this.boxLabel){
 187             cfg.cn.push({
 188                 tag: 'label',
 189                 'for': id,
 190                 cls: 'box-label',
 191                 html: this.boxLabel
 192             })
 193         }
 194
 195         return cfg;
 196
 197     },
 198     inputEl: function ()
 199     {
 200         return this.el.select('input.roo-radio',true).first();
 201     },
 202     onClick : function()
 203     {
 204         Roo.log("click");
 205         Roo.log("click");
 206         this.setChecked(true);
 207     },
 208
 209     setChecked : function(state,suppressEvent)
 210     {
 211         if(state){
 212             Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
 213                 v.dom.checked = false;
 214             });
 215         }
 216
 217         this.checked = state;
 218         this.inputEl().dom.checked = state;
 219
 220         if(suppressEvent !== true){
 221             this.fireEvent('check', this, state);
 222         }
 223
 224         //this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
 225
 226     },
 227
 228     getGroupValue : function()
 229     {
 230         var value = ''
 231         Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
 232             if(v.dom.checked == true){
 233                 value = v.dom.value;
 234             }
 235         });
 236
 237         return value;
 238     },
 239
 240     /**
 241      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
 242      * @return {Mixed} value The field value
 243      */
 244     getValue : function(){
 245         return this.getGroupValue();
 246     }
 247
 248 });
 249
 250