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         align = align || 'left'; // default...
  33
  34
  35         var id = Roo.id();
  36
  37         var cfg = {};
  38
  39         cfg.cls = 'form-group radio' //input-group
  40
  41         if (this.inline) {
  42             cfg.cls  += " radio-inline";
  43         }
  44
  45
  46         var input =  {
  47             tag: 'input',
  48             id : id,
  49             type : this.inputType,
  50             //value : (!this.checked) ? this.valueOff : this.inputValue,
  51             value : this.inputValue,
  52             cls : 'roo-radio',
  53             placeholder : this.placeholder || ''
  54
  55         };
  56           if (this.weight) { // Validity check?
  57             cfg.cls += " radio-" + this.weight;
  58         }
  59         if (this.disabled) {
  60             input.disabled=true;
  61         }
  62
  63         if(this.checked){
  64             input.checked = this.checked;
  65         }
  66
  67         if (this.name) {
  68             input.name = this.name;
  69         }
  70
  71         if (this.size) {
  72             input.cls += ' input-' + this.size;
  73         }
  74
  75         var settings=this;
  76         ['xs','sm','md','lg'].map(function(size){
  77             if (settings[size]) {
  78                 cfg.cls += ' col-' + size + '-' + settings[size];
  79             }
  80         });
  81
  82         var inputblock = input;
  83
  84         if (this.before || this.after) {
  85
  86             inputblock = {
  87                 cls : 'input-group',
  88                 cn :  []
  89             };
  90             if (this.before) {
  91                 inputblock.cn.push({
  92                     tag :'span',
  93                     cls : 'input-group-addon',
  94                     html : this.before
  95                 });
  96             }
  97             inputblock.cn.push(input);
  98             if (this.after) {
  99                 inputblock.cn.push({
 100                     tag :'span',
 101                     cls : 'input-group-addon',
 102                     html : this.after
 103                 });
 104             }
 105
 106         };
 107
 108         var lbl = {
 109                 tag: 'label' ,
 110                 'for' :  id,
 111                 cls : 'control-label col-md-' + this.labelWidth,
 112                 html : this.fieldLabel
 113
 114         };
 115         if (this.boxLabel) {
 116             lbl.tag = 'span';
 117             lbl.cls =  'col-md-' + this.labelWidth;
 118         }
 119
 120
 121         if (align ==='left' && this.fieldLabel.length) {
 122                 Roo.log("left and has label");
 123
 124
 125
 126                 cfg.cn = [
 127
 128                     lbl,
 129                     {
 130                         cls : "col-md-" + (12 - this.labelWidth),  // very focused on md ???
 131                         cn: [
 132                             inputblock
 133                         ]
 134                     }
 135
 136                 ];
 137         } else if ( this.fieldLabel.length) {
 138                 Roo.log(" label");
 139                 lbl.cls = '';
 140                  cfg.cn = [  lbl,    inputblock ];
 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