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         var lbl = {
 107                 tag: 'label' ,
 108                 'for' :  id,
 109                 cls : 'control-label col-md-' + this.labelWidth,
 110                 html : this.fieldLabel
 111
 112         };
 113         if (this.boxLabel) {
 114             lbl.tag = 'span';
 115
 116         }
 117
 118
 119         if (align ==='left' && this.fieldLabel.length) {
 120                 Roo.log("left and has label");
 121
 122
 123
 124                 cfg.cn = [
 125
 126                     lbl,
 127                     {
 128                         cls : "col-md-" + (12 - this.labelWidth),
 129                         cn: [
 130                             inputblock
 131                         ]
 132                     }
 133
 134                 ];
 135         } else if ( this.fieldLabel.length) {
 136                 Roo.log(" label");
 137                 lbl.cls = '';
 138                  cfg.cn = [  lbl,    inputblock ];
 139
 140         } else {
 141
 142                    Roo.log(" no label && no align");
 143                 cfg.cn = [
 144
 145                         inputblock
 146
 147                 ];
 148
 149
 150         };
 151
 152         if(this.boxLabel){
 153             cfg.cn.push({
 154                 tag: 'label',
 155                 'for': id,
 156                 cls: 'box-label',
 157                 html: this.boxLabel
 158             })
 159         }
 160
 161         return cfg;
 162
 163     },
 164     inputEl: function ()
 165     {
 166         return this.el.select('input.roo-radio',true).first();
 167     },
 168     onClick : function()
 169     {
 170         Roo.log("click");
 171         Roo.log("click");
 172         this.setChecked(true);
 173     },
 174
 175     setChecked : function(state,suppressEvent)
 176     {
 177         if(state){
 178             Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
 179                 v.dom.checked = false;
 180             });
 181         }
 182
 183         this.checked = state;
 184         this.inputEl().dom.checked = state;
 185
 186         if(suppressEvent !== true){
 187             this.fireEvent('check', this, state);
 188         }
 189
 190         //this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
 191
 192     },
 193
 194     getGroupValue : function()
 195     {
 196         var value = ''
 197         Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
 198             if(v.dom.checked == true){
 199                 value = v.dom.value;
 200             }
 201         });
 202
 203         return value;
 204     },
 205
 206     /**
 207      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
 208      * @return {Mixed} value The field value
 209      */
 210     getValue : function(){
 211         return this.getGroupValue();
 212     }
 213
 214 });
 215
 216