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