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