git.roojs.org Git - roojs1/blob - Roo/bootstrap/FieldLabel.js

   1 /*
   2  * - LGPL
   3  *
   4  * FieldLabel
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.FieldLabel
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap FieldLabel class
  12  * @cfg {String} html contents of the element
  13  * @cfg {String} tag tag of the element default label
  14  * @cfg {String} cls class of the element
  15  * @cfg {String} target label target
  16  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
  17  * @cfg {String} invalidClass default "text-danger fa fa-lg fa-exclamation-triangle"
  18  * @cfg {String} validClass default "text-success fa fa-lg fa-check"
  19  * @cfg {String} iconTooltip default "This field is required"
  20  *
  21  * @constructor
  22  * Create a new FieldLabel
  23  * @param {Object} config The config object
  24  */
  25
  26 Roo.bootstrap.FieldLabel = function(config){
  27     Roo.bootstrap.Element.superclass.constructor.call(this, config);
  28
  29     this.addEvents({
  30             /**
  31              * @event invalid
  32              * Fires after the field has been marked as invalid.
  33              * @param {Roo.form.FieldLabel} this
  34              * @param {String} msg The validation message
  35              */
  36             invalid : true,
  37             /**
  38              * @event valid
  39              * Fires after the field has been validated with no errors.
  40              * @param {Roo.form.FieldLabel} this
  41              */
  42             valid : true
  43         });
  44 };
  45
  46 Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
  47
  48     tag: 'label',
  49     cls: '',
  50     html: '',
  51     target: '',
  52     allowBlank : true,
  53     invalidClass : 'text-danger fa fa-lg fa-exclamation-triangle',
  54     validClass : 'text-success fa fa-lg fa-check',
  55     iconTooltip : 'This field is required',
  56
  57     getAutoCreate : function(){
  58
  59         var cfg = {
  60             tag : this.tag,
  61             cls : 'roo-bootstrap-field-label ' + this.cls,
  62             for : this.target,
  63             cn : [
  64                 {
  65                     tag : 'i',
  66                     cls : '',
  67                     tooltip : this.iconTooltip
  68                 },
  69                 {
  70                     tag : 'span',
  71                     html : this.html
  72                 }
  73             ]
  74         };
  75
  76         return cfg;
  77     },
  78
  79     initEvents: function()
  80     {
  81         Roo.bootstrap.Element.superclass.initEvents.call(this);
  82
  83         this.iconEl = this.el.select('i', true).first();
  84
  85         this.iconEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
  86
  87         Roo.log(this);
  88         Roo.log(this.target);
  89
  90         Roo.bootstrap.FieldLabel.register(this);
  91     },
  92
  93     /**
  94      * Mark this field as valid
  95      */
  96     markValid : function()
  97     {
  98         this.iconEl.show();
  99
 100         this.iconEl.removeClass(this.invalidClass);
 101
 102         this.iconEl.addClass(this.validClass);
 103
 104         this.fireEvent('valid', this);
 105     },
 106
 107     /**
 108      * Mark this field as invalid
 109      * @param {String} msg The validation message
 110      */
 111     markInvalid : function(msg)
 112     {
 113         this.iconEl.show();
 114
 115         this.iconEl.removeClass(this.validClass);
 116
 117         this.iconEl.addClass(this.invalidClass);
 118
 119         this.fireEvent('invalid', this, msg);
 120     }
 121
 122
 123 });
 124
 125 Roo.apply(Roo.bootstrap.FieldLabel, {
 126
 127     groups: {},
 128
 129      /**
 130     * register a FieldLabel Group
 131     * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
 132     */
 133     register : function(label)
 134     {
 135         if(this.groups.hasOwnProperty(label.target)){
 136             return;
 137         }
 138
 139         this.groups[label.target] = label;
 140
 141     },
 142     /**
 143     * fetch a FieldLabel Group based on the target
 144     * @param {string} target
 145     * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
 146     */
 147     get: function(target) {
 148         if (typeof(this.groups[target]) == 'undefined') {
 149             return false;
 150         }
 151
 152         return this.groups[target] ;
 153     }
 154 });
 155
 156
 157
 158