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

   1 /*
   2  * - LGPL
   3  *
   4  * RadioSet
   5  *
   6  *
   7  */
   8
   9 /**
  10  * @class Roo.bootstrap.RadioSet
  11  * @extends Roo.bootstrap.Input
  12  * Bootstrap RadioSet class
  13  * @cfg {String} indicatorpos (left|right) default left
  14  * @cfg {Boolean} inline (true|false) inline the element (default true)
  15  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
  16  * @constructor
  17  * Create a new RadioSet
  18  * @param {Object} config The config object
  19  */
  20
  21 Roo.bootstrap.RadioSet = function(config){
  22
  23     Roo.bootstrap.RadioSet.superclass.constructor.call(this, config);
  24
  25     this.radioes = [];
  26
  27     Roo.bootstrap.RadioSet.register(this);
  28
  29     this.addEvents({
  30         /**
  31         * @event check
  32         * Fires when the element is checked or unchecked.
  33         * @param {Roo.bootstrap.RadioSet} this This radio
  34         * @param {Roo.bootstrap.Radio} item The checked item
  35         */
  36        check : true
  37     });
  38
  39 };
  40
  41 Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
  42
  43     radioes : false,
  44
  45     inline : true,
  46
  47     weight : '',
  48
  49     fieldLabel : '',
  50
  51     indicatorpos : 'left',
  52
  53     labellg : 0,
  54     labelmd : 0,
  55     labelsm : 0,
  56     labelxs : 0,
  57
  58     getAutoCreate : function()
  59     {
  60         var label = {
  61             tag : 'label',
  62             cls : 'roo-radio-set-label',
  63             cn : [
  64                 {
  65                     tag : 'span',
  66                     html : this.fieldLabel
  67                 }
  68             ]
  69         };
  70
  71         if(this.indicatorpos == 'left'){
  72             label.cn.unshift({
  73                 tag : 'i',
  74                 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
  75                 tooltip : 'This field is required'
  76             });
  77         } else {
  78             label.cn.push({
  79                 tag : 'i',
  80                 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
  81                 tooltip : 'This field is required'
  82             });
  83         }
  84
  85         var items = {
  86             tag : 'div',
  87             cls : 'roo-radio-set-items'
  88         };
  89
  90         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  91
  92         if (align === 'left' && this.fieldLabel.length) {
  93
  94             items = {
  95                 cls : "roo-radio-set-right",
  96                 cn: [
  97                     items
  98                 ]
  99             };
 100
 101             Roo.log(this.labelWidth);
 102
 103             if(this.labelWidth > 12){
 104                 label.style = "width: " + this.labelWidth + 'px';
 105             }
 106
 107             if(this.labelWidth < 13 && this.labelmd == 0){
 108                 this.labelmd = this.labelWidth;
 109             }
 110
 111             if(this.labellg > 0){
 112                 label.cls += ' col-lg-' + this.labellg;
 113                 items.cls += ' col-lg-' + (12 - this.labellg);
 114             }
 115
 116             if(this.labelmd > 0){
 117                 label.cls += ' col-md-' + this.labelmd;
 118                 items.cls += ' col-md-' + (12 - this.labelmd);
 119             }
 120
 121             if(this.labelsm > 0){
 122                 label.cls += ' col-sm-' + this.labelsm;
 123                 items.cls += ' col-sm-' + (12 - this.labelsm);
 124             }
 125
 126             if(this.labelxs > 0){
 127                 label.cls += ' col-xs-' + this.labelxs;
 128                 items.cls += ' col-xs-' + (12 - this.labelxs);
 129             }
 130         }
 131
 132         var cfg = {
 133             tag : 'div',
 134             cls : 'roo-radio-set',
 135             cn : [
 136                 {
 137                     tag : 'input',
 138                     cls : 'roo-radio-set-input',
 139                     type : 'text',
 140                     name : this.name,
 141                     value : this.value ? this.value :  ''
 142                 },
 143                 label,
 144                 items
 145             ]
 146         };
 147
 148         if(this.weight.length){
 149             cfg.cls += ' roo-radio-' + this.weight;
 150         }
 151
 152         if(this.inline) {
 153             cfg.cls += ' roo-radio-set-inline';
 154         }
 155
 156         return cfg;
 157
 158     },
 159
 160     initEvents : function()
 161     {
 162         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
 163         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
 164
 165         if(!this.fieldLabel.length){
 166             this.labelEl.hide();
 167         }
 168
 169         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
 170         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
 171
 172         this.indicatorEl().setVisibilityMode(Roo.Element.DISPLAY);
 173         this.indicatorEl().hide();
 174
 175         this.originalValue = this.getValue();
 176
 177     },
 178
 179     inputEl: function ()
 180     {
 181         return this.el.select('.roo-radio-set-input', true).first();
 182     },
 183
 184     getChildContainer : function()
 185     {
 186         return this.itemsEl;
 187     },
 188
 189     register : function(item)
 190     {
 191         this.radioes.push(item);
 192
 193     },
 194
 195     validate : function()
 196     {
 197         var valid = false;
 198
 199         Roo.each(this.radioes, function(i){
 200             if(!i.checked){
 201                 return;
 202             }
 203
 204             valid = true;
 205             return false;
 206         });
 207
 208         if(this.disabled || this.allowBlank || valid){
 209             this.markValid();
 210             return true;
 211         }
 212
 213         this.markInvalid();
 214         return false;
 215
 216     },
 217
 218     markValid : function()
 219     {
 220         if(this.labelEl.isVisible(true)){
 221             this.indicatorEl().hide();
 222         }
 223
 224         this.el.removeClass([this.invalidClass, this.validClass]);
 225         this.el.addClass(this.validClass);
 226
 227         this.fireEvent('valid', this);
 228     },
 229
 230     markInvalid : function(msg)
 231     {
 232         if(this.allowBlank || this.disabled){
 233             return;
 234         }
 235
 236         if(this.labelEl.isVisible(true)){
 237             this.indicatorEl().show();
 238         }
 239
 240         this.el.removeClass([this.invalidClass, this.validClass]);
 241         this.el.addClass(this.invalidClass);
 242
 243         this.fireEvent('invalid', this, msg);
 244
 245     },
 246
 247     setValue : function(v, suppressEvent)
 248     {
 249         Roo.each(this.radioes, function(i){
 250
 251             i.checked = false;
 252             i.el.removeClass('checked');
 253
 254             if(i.value === v || i.value.toString() === v.toString()){
 255                 i.checked = true;
 256                 i.el.addClass('checked');
 257
 258                 if(suppressEvent !== true){
 259                     this.fireEvent('check', this, i);
 260                 }
 261             }
 262
 263         }, this);
 264
 265         Roo.bootstrap.RadioSet.superclass.setValue.call(this, v);
 266
 267     },
 268
 269     clearInvalid : function(){
 270
 271         if(!this.el || this.preventMark){
 272             return;
 273         }
 274
 275         if(this.labelEl.isVisible(true)){
 276             this.indicatorEl().hide();
 277         }
 278
 279         this.el.removeClass([this.invalidClass]);
 280
 281         this.fireEvent('valid', this);
 282     }
 283
 284 });
 285
 286 Roo.apply(Roo.bootstrap.RadioSet, {
 287
 288     groups: {},
 289
 290     register : function(set)
 291     {
 292         this.groups[set.name] = set;
 293     },
 294
 295     get: function(name)
 296     {
 297         if (typeof(this.groups[name]) == 'undefined') {
 298             return false;
 299         }
 300
 301         return this.groups[name] ;
 302     }
 303
 304 });