git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_FieldLabel.js.html

   1 <html><head><title>Roo/bootstrap/FieldLabel.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   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 DEPRICATED - BS4 uses is-invalid
  18  * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
  19  * @cfg {String} iconTooltip default &quot;This field is required&quot;
  20  * @cfg {String} indicatorpos (left|right) default left
  21  *
  22  * @constructor
  23  * Create a new FieldLabel
  24  * @param {Object} config The config object
  25  */
  26
  27 </span><span class="jsdoc-var">Roo.bootstrap.FieldLabel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  28     </span><span class="jsdoc-var">Roo.bootstrap.Element.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  29
  30     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  31             </span><span class="jsdoc-comment">/**
  32              * @event invalid
  33              * Fires after the field has been marked as invalid.
  34              * @param {Roo.form.FieldLabel} this
  35              * @param {String} msg The validation message
  36              */
  37             </span><span class="jsdoc-var">invalid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  38             </span><span class="jsdoc-comment">/**
  39              * @event valid
  40              * Fires after the field has been validated with no errors.
  41              * @param {Roo.form.FieldLabel} this
  42              */
  43             </span><span class="jsdoc-var">valid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  44         </span><span class="jsdoc-syntax">});
  45 };
  46
  47 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.FieldLabel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  48
  49     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'label'</span><span class="jsdoc-syntax">,
  50     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  51     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  52     </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  53     </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  54     </span><span class="jsdoc-var">invalidClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'has-warning'</span><span class="jsdoc-syntax">,
  55     </span><span class="jsdoc-var">validClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'has-success'</span><span class="jsdoc-syntax">,
  56     </span><span class="jsdoc-var">iconTooltip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'This field is required'</span><span class="jsdoc-syntax">,
  57     </span><span class="jsdoc-var">indicatorpos </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
  58
  59     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  60
  61         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
  62         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.allowBlank</span><span class="jsdoc-syntax">) {
  63             </span><span class="jsdoc-var">cls  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;visible&quot;</span><span class="jsdoc-syntax">;
  64         }
  65
  66         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  67             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.tag</span><span class="jsdoc-syntax">,
  68             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-bootstrap-field-label ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">,
  69             </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.target</span><span class="jsdoc-syntax">,
  70             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  71                 {
  72                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  73                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
  74                     </span><span class="jsdoc-var">tooltip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.iconTooltip
  75                 </span><span class="jsdoc-syntax">},
  76                 {
  77                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  78                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
  79                 </span><span class="jsdoc-syntax">}
  80             ]
  81         };
  82
  83         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicatorpos </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">){
  84             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  85                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.tag</span><span class="jsdoc-syntax">,
  86                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-bootstrap-field-label ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">,
  87                 </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.target</span><span class="jsdoc-syntax">,
  88                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  89                     {
  90                         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  91                         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
  92                     </span><span class="jsdoc-syntax">},
  93                     {
  94                         </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  95                         </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
  96                         </span><span class="jsdoc-var">tooltip </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.iconTooltip
  97                     </span><span class="jsdoc-syntax">}
  98                 ]
  99             };
 100         }
 101
 102         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 103     },
 104
 105     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 106     {
 107         </span><span class="jsdoc-var">Roo.bootstrap.Element.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 108
 109         </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indicatorEl</span><span class="jsdoc-syntax">();
 110
 111         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicator</span><span class="jsdoc-syntax">){
 112             </span><span class="jsdoc-var">this.indicator.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">);
 113             </span><span class="jsdoc-var">this.indicator.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'invisible'</span><span class="jsdoc-syntax">);
 114         }
 115
 116         </span><span class="jsdoc-var">Roo.bootstrap.FieldLabel.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 117     },
 118
 119     </span><span class="jsdoc-var">indicatorEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 120     {
 121         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'i.roo-required-indicator'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 122
 123         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">indicator</span><span class="jsdoc-syntax">){
 124             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 125         }
 126
 127         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">indicator</span><span class="jsdoc-syntax">;
 128
 129     },
 130
 131     </span><span class="jsdoc-comment">/**
 132      * Mark this field as valid
 133      */
 134     </span><span class="jsdoc-var">markValid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 135     {
 136         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicator</span><span class="jsdoc-syntax">){
 137             </span><span class="jsdoc-var">this.indicator.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">);
 138             </span><span class="jsdoc-var">this.indicator.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'invisible'</span><span class="jsdoc-syntax">);
 139         }
 140         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 3) {
 141             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.invalidClass</span><span class="jsdoc-syntax">);
 142             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.validClass</span><span class="jsdoc-syntax">);
 143         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 144             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'is-invalid'</span><span class="jsdoc-syntax">);
 145             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'is-valid'</span><span class="jsdoc-syntax">);
 146         }
 147
 148
 149         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'valid'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 150     },
 151
 152     </span><span class="jsdoc-comment">/**
 153      * Mark this field as invalid
 154      * @param {String} msg The validation message
 155      */
 156     </span><span class="jsdoc-var">markInvalid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">)
 157     {
 158         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicator</span><span class="jsdoc-syntax">){
 159             </span><span class="jsdoc-var">this.indicator.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'invisible'</span><span class="jsdoc-syntax">);
 160             </span><span class="jsdoc-var">this.indicator.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">);
 161         }
 162           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 3) {
 163             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.validClass</span><span class="jsdoc-syntax">);
 164             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.invalidClass</span><span class="jsdoc-syntax">);
 165         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 166             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'is-valid'</span><span class="jsdoc-syntax">);
 167             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'is-invalid'</span><span class="jsdoc-syntax">);
 168         }
 169
 170
 171         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'invalid'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">msg</span><span class="jsdoc-syntax">);
 172     }
 173
 174
 175 });
 176
 177 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.FieldLabel</span><span class="jsdoc-syntax">, {
 178
 179     </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">: {},
 180
 181      </span><span class="jsdoc-comment">/**
 182     * register a FieldLabel Group
 183     * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
 184     */
 185     </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">label</span><span class="jsdoc-syntax">)
 186     {
 187         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups.hasOwnProperty</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">label.target</span><span class="jsdoc-syntax">)){
 188             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 189         }
 190
 191         </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">label.target</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">label</span><span class="jsdoc-syntax">;
 192
 193     },
 194     </span><span class="jsdoc-comment">/**
 195     * fetch a FieldLabel Group based on the target
 196     * @param {string} target
 197     * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
 198     */
 199     </span><span class="jsdoc-var">get</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">) {
 200         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 201             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 202         }
 203
 204         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">] ;
 205     }
 206 });
 207
 208
 209
 210  </span></code></body></html>