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