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

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