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             label.cls += ' col-md-' + this.labelWidth;
  90
  91             items = {
  92                 cls : "col-md-" + (12 - this.labelWidth),
  93                 cn: [
  94                     items
  95                 ]
  96             };
  97         }
  98
  99         var cfg = {
 100             tag : 'div',
 101             cls : 'roo-radio-set',
 102             cn : [
 103                 {
 104                     tag : 'input',
 105                     cls : 'roo-radio-set-input',
 106                     type : 'text',
 107                     name : this.name,
 108                     value : this.value ? this.value :  ''
 109                 },
 110                 label,
 111                 items
 112             ]
 113         };
 114
 115         if(this.weight){
 116             cfg.cls += ' radio-' + this.weight;
 117         }
 118
 119         if(this.inline) {
 120             cfg.cls += ' roo-radio-set-inline';
 121         }
 122
 123         return cfg;
 124
 125     },
 126
 127     initEvents : function()
 128     {
 129         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
 130         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
 131
 132         if(!this.fieldLabel.length){
 133             this.labelEl.hide();
 134         }
 135
 136         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
 137         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
 138
 139         this.indicatorEl().hide();
 140
 141         this.originalValue = this.getValue();
 142
 143     },
 144
 145     inputEl: function ()
 146     {
 147         return this.el.select('.roo-radio-set-input', true).first();
 148     },
 149
 150     getChildContainer : function()
 151     {
 152         return this.itemsEl;
 153     },
 154
 155     register : function(item)
 156     {
 157         this.radioes.push(item);
 158
 159     },
 160
 161     validate : function()
 162     {
 163         var valid = false;
 164
 165         Roo.each(this.radioes, function(i){
 166             if(!i.checked){
 167                 return;
 168             }
 169
 170             valid = true;
 171             return false;
 172         });
 173
 174         if(this.disabled || this.allowBlank || valid){
 175             this.markValid();
 176             return true;
 177         }
 178
 179         this.markInvalid();
 180         return false;
 181
 182     },
 183
 184     markValid : function()
 185     {
 186         if(this.labelEl.isVisible(true)){
 187             this.indicatorEl().hide();
 188         }
 189
 190         this.el.removeClass([this.invalidClass, this.validClass]);
 191         this.el.addClass(this.validClass);
 192
 193         this.fireEvent('valid', this);
 194     },
 195
 196     markInvalid : function(msg)
 197     {
 198         if(this.allowBlank || this.disabled){
 199             return;
 200         }
 201
 202         if(this.labelEl.isVisible(true)){
 203             this.indicatorEl().show();
 204         }
 205
 206         this.el.removeClass([this.invalidClass, this.validClass]);
 207         this.el.addClass(this.invalidClass);
 208
 209         this.fireEvent('invalid', this, msg);
 210
 211     },
 212
 213     setValue : function(v, suppressEvent)
 214     {
 215         Roo.each(this.radioes, function(i){
 216
 217             i.checked = false;
 218             i.el.removeClass('checked');
 219
 220             if(i.value === v || i.value.toString() === v.toString()){
 221                 i.checked = true;
 222                 i.el.addClass('checked');
 223
 224                 if(suppressEvent !== true){
 225                     this.fireEvent('check', this, i);
 226                 }
 227             }
 228
 229         }, this);
 230
 231         Roo.bootstrap.RadioSet.superclass.setValue.call(this, v);
 232
 233     },
 234
 235     clearInvalid : function(){
 236
 237         if(!this.el || this.preventMark){
 238             return;
 239         }
 240
 241         if(this.labelEl.isVisible(true)){
 242             this.indicatorEl().hide();
 243         }
 244
 245         this.el.removeClass([this.invalidClass, this.validClass]);
 246
 247         this.fireEvent('valid', this);
 248     }
 249
 250 });
 251
 252 Roo.apply(Roo.bootstrap.RadioSet, {
 253
 254     groups: {},
 255
 256     register : function(set)
 257     {
 258         this.groups[set.name] = set;
 259     },
 260
 261     get: function(name)
 262     {
 263         if (typeof(this.groups[name]) == 'undefined') {
 264             return false;
 265         }
 266
 267         return this.groups[name] ;
 268     }
 269
 270 });