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