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 : "roo-radio-set-right 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.length){
 116             cfg.cls += ' roo-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().setVisibilityMode(Roo.Element.DISPLAY);
 140         this.indicatorEl().hide();
 141
 142         this.originalValue = this.getValue();
 143
 144     },
 145
 146     inputEl: function ()
 147     {
 148         return this.el.select('.roo-radio-set-input', true).first();
 149     },
 150
 151     getChildContainer : function()
 152     {
 153         return this.itemsEl;
 154     },
 155
 156     register : function(item)
 157     {
 158         this.radioes.push(item);
 159
 160     },
 161
 162     validate : function()
 163     {
 164         var valid = false;
 165
 166         Roo.each(this.radioes, function(i){
 167             if(!i.checked){
 168                 return;
 169             }
 170
 171             valid = true;
 172             return false;
 173         });
 174
 175         if(this.disabled || this.allowBlank || valid){
 176             this.markValid();
 177             return true;
 178         }
 179
 180         this.markInvalid();
 181         return false;
 182
 183     },
 184
 185     markValid : function()
 186     {
 187         if(this.labelEl.isVisible(true)){
 188             this.indicatorEl().hide();
 189         }
 190
 191         this.el.removeClass([this.invalidClass, this.validClass]);
 192         this.el.addClass(this.validClass);
 193
 194         this.fireEvent('valid', this);
 195     },
 196
 197     markInvalid : function(msg)
 198     {
 199         if(this.allowBlank || this.disabled){
 200             return;
 201         }
 202
 203         if(this.labelEl.isVisible(true)){
 204             this.indicatorEl().show();
 205         }
 206
 207         this.el.removeClass([this.invalidClass, this.validClass]);
 208         this.el.addClass(this.invalidClass);
 209
 210         this.fireEvent('invalid', this, msg);
 211
 212     },
 213
 214     setValue : function(v, suppressEvent)
 215     {
 216         Roo.each(this.radioes, function(i){
 217
 218             i.checked = false;
 219             i.el.removeClass('checked');
 220
 221             if(i.value === v || i.value.toString() === v.toString()){
 222                 i.checked = true;
 223                 i.el.addClass('checked');
 224
 225                 if(suppressEvent !== true){
 226                     this.fireEvent('check', this, i);
 227                 }
 228             }
 229
 230         }, this);
 231
 232         Roo.bootstrap.RadioSet.superclass.setValue.call(this, v);
 233
 234     },
 235
 236     clearInvalid : function(){
 237
 238         if(!this.el || this.preventMark){
 239             return;
 240         }
 241
 242         if(this.labelEl.isVisible(true)){
 243             this.indicatorEl().hide();
 244         }
 245
 246         this.el.removeClass([this.invalidClass]);
 247
 248         this.fireEvent('valid', this);
 249     }
 250
 251 });
 252
 253 Roo.apply(Roo.bootstrap.RadioSet, {
 254
 255     groups: {},
 256
 257     register : function(set)
 258     {
 259         this.groups[set.name] = set;
 260     },
 261
 262     get: function(name)
 263     {
 264         if (typeof(this.groups[name]) == 'undefined') {
 265             return false;
 266         }
 267
 268         return this.groups[name] ;
 269     }
 270
 271 });