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 : 'hidden',
 107                     name : this.name,
 108                     value : this.value ? this.value :  ''
 109                 },
 110                 label,
 111                 items
 112             ]
 113         };
 114
 115         if(this.inline) {
 116             cfg.cls += ' roo-radio-set-inline';
 117         }
 118
 119         return cfg;
 120
 121     },
 122
 123     initEvents : function()
 124     {
 125         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
 126         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
 127
 128         this.indicatorEl().hide();
 129
 130         this.originalValue = this.getValue();
 131
 132     },
 133
 134     inputEl: function ()
 135     {
 136         return this.el.select('.roo-radio-set-input', true).first();
 137     },
 138
 139     getChildContainer : function()
 140     {
 141         return this.itemsEl;
 142     },
 143
 144     register : function(item)
 145     {
 146         this.radioes.push(item);
 147
 148         if(this.inline){
 149             item.el.addClass('radio-inline');
 150         }
 151
 152     },
 153
 154     validate : function()
 155     {
 156         var valid = false;
 157
 158         Roo.each(this.radioes, function(i){
 159             if(!i.checked){
 160                 return;
 161             }
 162
 163             valid = true;
 164             return false;
 165         });
 166
 167         if(this.disabled || this.allowBlank || valid){
 168             this.markValid();
 169             return true;
 170         }
 171
 172         this.markInvalid();
 173         return false;
 174
 175     },
 176
 177     markValid : function()
 178     {
 179         this.indicatorEl().hide();
 180         this.el.removeClass([this.invalidClass, this.validClass]);
 181         this.el.addClass(this.validClass);
 182
 183         this.fireEvent('valid', this);
 184     },
 185
 186     markInvalid : function(msg)
 187     {
 188         if(this.allowBlank || this.disabled){
 189             return;
 190         }
 191
 192         this.indicatorEl().show();
 193         this.el.removeClass([this.invalidClass, this.validClass]);
 194         this.el.addClass(this.invalidClass);
 195
 196         this.fireEvent('invalid', this, msg);
 197
 198     },
 199
 200     setValue : function(v, suppressEvent)
 201     {
 202         Roo.each(this.radioes, function(i){
 203
 204             i.checked = false;
 205             i.el.removeClass('checked');
 206
 207             if(i.value === v || i.value === v.toString()){
 208                 i.checked = true;
 209                 i.el.addClass('checked');
 210
 211                 if(suppressEvent !== true){
 212                     this.fireEvent('check', this, i);
 213                 }
 214             }
 215
 216         }, this);
 217
 218         Roo.bootstrap.RadioSet.superclass.setValue.call(this)
 219
 220     }
 221
 222 });
 223
 224 Roo.apply(Roo.bootstrap.RadioSet, {
 225
 226     groups: {},
 227
 228     register : function(set)
 229     {
 230         this.groups[set.name] = set;
 231     },
 232
 233     get: function(name)
 234     {
 235         if (typeof(this.groups[name]) == 'undefined') {
 236             return false;
 237         }
 238
 239         return this.groups[name] ;
 240     }
 241
 242 });