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

   1 /*
   2  * - LGPL
   3  *
   4  * Input
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.TextArea
  10  * @extends Roo.bootstrap.Input
  11  * Bootstrap TextArea class
  12  * @cfg {Number} cols Specifies the visible width of a text area
  13  * @cfg {Number} rows Specifies the visible number of lines in a text area
  14  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
  15  * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
  16  * @cfg {string} html text
  17  *
  18  * @constructor
  19  * Create a new TextArea
  20  * @param {Object} config The config object
  21  */
  22
  23 Roo.bootstrap.TextArea = function(config){
  24     Roo.bootstrap.TextArea.superclass.constructor.call(this, config);
  25
  26 };
  27
  28 Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
  29
  30     cols : false,
  31     rows : 5,
  32     readOnly : false,
  33     warp : 'soft',
  34     resize : false,
  35     value: false,
  36     html: false,
  37
  38     getAutoCreate : function(){
  39
  40         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  41
  42         var id = Roo.id();
  43
  44         var cfg = {};
  45
  46         var input =  {
  47             tag: 'textarea',
  48             id : id,
  49             warp : this.warp,
  50             rows : this.rows,
  51             value : this.value || '',
  52             html: this.html || '',
  53             cls : 'form-control',
  54             placeholder : this.placeholder || ''
  55
  56         };
  57
  58         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
  59             input.maxLength = this.maxLength;
  60         }
  61
  62         if(this.resize){
  63             input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
  64         }
  65
  66         if(this.cols){
  67             input.cols = this.cols;
  68         }
  69
  70         if (this.readOnly) {
  71             input.readonly = true;
  72         }
  73
  74         if (this.name) {
  75             input.name = this.name;
  76         }
  77
  78         if (this.size) {
  79             input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
  80         }
  81
  82         var settings=this;
  83         ['xs','sm','md','lg'].map(function(size){
  84             if (settings[size]) {
  85                 cfg.cls += ' col-' + size + '-' + settings[size];
  86             }
  87         });
  88
  89         var inputblock = input;
  90
  91         if(this.hasFeedback && !this.allowBlank){
  92
  93             var feedback = {
  94                 tag: 'span',
  95                 cls: 'glyphicon form-control-feedback'
  96             };
  97
  98             inputblock = {
  99                 cls : 'has-feedback',
 100                 cn :  [
 101                     input,
 102                     feedback
 103                 ]
 104             };
 105         }
 106
 107
 108         if (this.before || this.after) {
 109
 110             inputblock = {
 111                 cls : 'input-group',
 112                 cn :  []
 113             };
 114             if (this.before) {
 115                 inputblock.cn.push({
 116                     tag :'span',
 117                     cls : 'input-group-addon',
 118                     html : this.before
 119                 });
 120             }
 121
 122             inputblock.cn.push(input);
 123
 124             if(this.hasFeedback && !this.allowBlank){
 125                 inputblock.cls += ' has-feedback';
 126                 inputblock.cn.push(feedback);
 127             }
 128
 129             if (this.after) {
 130                 inputblock.cn.push({
 131                     tag :'span',
 132                     cls : 'input-group-addon',
 133                     html : this.after
 134                 });
 135             }
 136
 137         }
 138
 139         if (align ==='left' && this.fieldLabel.length) {
 140 //                Roo.log("left and has label");
 141                 cfg.cn = [
 142
 143                     {
 144                         tag: 'label',
 145                         'for' :  id,
 146                         cls : 'control-label col-sm-' + this.labelWidth,
 147                         html : this.fieldLabel
 148
 149                     },
 150                     {
 151                         cls : "col-sm-" + (12 - this.labelWidth),
 152                         cn: [
 153                             inputblock
 154                         ]
 155                     }
 156
 157                 ];
 158         } else if ( this.fieldLabel.length) {
 159 //                Roo.log(" label");
 160                  cfg.cn = [
 161
 162                     {
 163                         tag: 'label',
 164                         //cls : 'input-group-addon',
 165                         html : this.fieldLabel
 166
 167                     },
 168
 169                     inputblock
 170
 171                 ];
 172
 173         } else {
 174
 175 //                   Roo.log(" no label && no align");
 176                 cfg.cn = [
 177
 178                         inputblock
 179
 180                 ];
 181
 182
 183         }
 184
 185         if (this.disabled) {
 186             input.disabled=true;
 187         }
 188
 189         return cfg;
 190
 191     },
 192     /**
 193      * return the real textarea element.
 194      */
 195     inputEl: function ()
 196     {
 197         return this.el.select('textarea.form-control',true).first();
 198     },
 199
 200     /**
 201      * Clear any invalid styles/messages for this field
 202      */
 203     clearInvalid : function()
 204     {
 205
 206         if(!this.el || this.preventMark){ // not rendered
 207             return;
 208         }
 209
 210         var label = this.el.select('label', true).first();
 211         var icon = this.el.select('i.fa-star', true).first();
 212
 213         if(label && icon){
 214             icon.remove();
 215         }
 216
 217         this.el.removeClass(this.invalidClass);
 218
 219         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
 220
 221             var feedback = this.el.select('.form-control-feedback', true).first();
 222
 223             if(feedback){
 224                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
 225             }
 226
 227         }
 228
 229         this.fireEvent('valid', this);
 230     },
 231
 232      /**
 233      * Mark this field as valid
 234      */
 235     markValid : function()
 236     {
 237         if(!this.el  || this.preventMark){ // not rendered
 238             return;
 239         }
 240
 241         this.el.removeClass([this.invalidClass, this.validClass]);
 242
 243         var feedback = this.el.select('.form-control-feedback', true).first();
 244
 245         if(feedback){
 246             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 247         }
 248
 249         if(this.disabled || this.allowBlank){
 250             return;
 251         }
 252
 253         var label = this.el.select('label', true).first();
 254         var icon = this.el.select('i.fa-star', true).first();
 255
 256         if(label && icon){
 257             icon.remove();
 258         }
 259
 260         this.el.addClass(this.validClass);
 261
 262         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
 263
 264             var feedback = this.el.select('.form-control-feedback', true).first();
 265
 266             if(feedback){
 267                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 268                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
 269             }
 270
 271         }
 272
 273         this.fireEvent('valid', this);
 274     },
 275
 276      /**
 277      * Mark this field as invalid
 278      * @param {String} msg The validation message
 279      */
 280     markInvalid : function(msg)
 281     {
 282         if(!this.el  || this.preventMark){ // not rendered
 283             return;
 284         }
 285
 286         this.el.removeClass([this.invalidClass, this.validClass]);
 287
 288         var feedback = this.el.select('.form-control-feedback', true).first();
 289
 290         if(feedback){
 291             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 292         }
 293
 294         if(this.disabled || this.allowBlank){
 295             return;
 296         }
 297
 298         var label = this.el.select('label', true).first();
 299         var icon = this.el.select('i.fa-star', true).first();
 300
 301         if(!this.getValue().length && label && !icon){
 302             this.el.createChild({
 303                 tag : 'i',
 304                 cls : 'text-danger fa fa-lg fa-star',
 305                 tooltip : 'This field is required',
 306                 style : 'margin-right:5px;'
 307             }, label, true);
 308         }
 309
 310         this.el.addClass(this.invalidClass);
 311
 312         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
 313
 314             var feedback = this.el.select('.form-control-feedback', true).first();
 315
 316             if(feedback){
 317                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 318
 319                 if(this.getValue().length || this.forceFeedback){
 320                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
 321                 }
 322
 323             }
 324
 325         }
 326
 327         this.fireEvent('invalid', this, msg);
 328     }
 329 });
 330
 331