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.Component
  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 {Number} readOnly Specifies that a text area should be read-only
  15  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
  16  *
  17  * @constructor
  18  * Create a new TextArea
  19  * @param {Object} config The config object
  20  */
  21
  22 Roo.bootstrap.TextArea = function(config){
  23     Roo.bootstrap.TextArea.superclass.constructor.call(this, config);
  24
  25 };
  26
  27 Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input,  {
  28
  29     cols : 20,
  30     rows : 3,
  31     readOnly : false,
  32     warp : 'soft',
  33     resize : 'both',
  34
  35     getAutoCreate : function(){
  36
  37         var parent = this.parent();
  38
  39         var align = parent.labelAlign;
  40
  41         var id = Roo.id();
  42
  43         var cfg = {};
  44
  45         var input =  {
  46             tag: 'textarea',
  47             id : id,
  48             warp : this.warp,
  49             cols : this.cols,
  50             rows : this.rows,
  51             value : this.value,
  52             cls : 'form-control',
  53             placeholder : this.placeholder || ''
  54
  55         };
  56
  57         if (this.name) {
  58             input.name = this.name;
  59         }
  60
  61         if (this.size) {
  62             input.cls += ' input-' + this.size;
  63         }
  64
  65         var settings=this;
  66         ['xs','sm','md','lg'].map(function(size){
  67             if (settings[size]) {
  68                 cfg.cls += ' col-' + size + '-' + settings[size];
  69             }
  70         });
  71
  72         var inputblock = input;
  73
  74         if (this.before || this.after) {
  75
  76             inputblock = {
  77                 cls : 'input-group',
  78                 cn :  []
  79             };
  80             if (this.before) {
  81                 inputblock.cn.push({
  82                     tag :'span',
  83                     cls : 'input-group-addon',
  84                     html : this.before
  85                 });
  86             }
  87             inputblock.cn.push(input);
  88             if (this.after) {
  89                 inputblock.cn.push({
  90                     tag :'span',
  91                     cls : 'input-group-addon',
  92                     html : this.after
  93                 });
  94             }
  95
  96         }
  97
  98         if (align ==='left' && this.fieldLabel.length) {
  99                 Roo.log("left and has label");
 100                 cfg.cn = [
 101
 102                     {
 103                         tag: 'label',
 104                         'for' :  id,
 105                         cls : 'control-label col-sm-' + this.labelWidth,
 106                         html : this.fieldLabel
 107
 108                     },
 109                     {
 110                         cls : "col-sm-" + (12 - this.labelWidth),
 111                         cn: [
 112                             inputblock
 113                         ]
 114                     }
 115
 116                 ];
 117         } else if ( this.fieldLabel.length) {
 118                 Roo.log(" label");
 119                  cfg.cn = [
 120
 121                     {
 122                         tag: 'label',
 123                         //cls : 'input-group-addon',
 124                         html : this.fieldLabel
 125
 126                     },
 127
 128                     inputblock
 129
 130                 ];
 131
 132         } else {
 133
 134                    Roo.log(" no label && no align");
 135                 cfg.cn = [
 136
 137                         inputblock
 138
 139                 ];
 140
 141
 142         }
 143
 144         if (this.disabled) {
 145             input.disabled=true;
 146         }
 147
 148         if (this.readOnly) {
 149             input.readonly = true;
 150         }
 151
 152         return cfg;
 153
 154     },
 155     /**
 156      * return the real textarea element.
 157      */
 158     inputEl: function ()
 159     {
 160         return this.el.select('textarea.form-control',true).first();
 161     }
 162 });
 163
 164