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