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
19 * Create a new TextArea
20 * @param {Object} config The config object
23 Roo.bootstrap.TextArea = function(config){
24 Roo.bootstrap.TextArea.superclass.constructor.call(this, config);
28 Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, {
38 getAutoCreate : function(){
40 var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
46 if(this.inputType != 'hidden'){
47 cfg.cls = 'form-group' //input-group
55 value : this.value || '',
56 html: this.html || '',
58 placeholder : this.placeholder || ''
62 if(this.maxLength && this.maxLength != Number.MAX_VALUE){
63 input.maxLength = this.maxLength;
67 input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
71 input.cols = this.cols;
75 input.readonly = true;
79 input.name = this.name;
83 input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
87 ['xs','sm','md','lg'].map(function(size){
89 cfg.cls += ' col-' + size + '-' + settings[size];
93 var inputblock = input;
95 if(this.hasFeedback && !this.allowBlank){
99 cls: 'glyphicon form-control-feedback'
103 cls : 'has-feedback',
112 if (this.before || this.after) {
121 cls : 'input-group-addon',
126 inputblock.cn.push(input);
128 if(this.hasFeedback && !this.allowBlank){
129 inputblock.cls += ' has-feedback';
130 inputblock.cn.push(feedback);
136 cls : 'input-group-addon',
143 if (align ==='left' && this.fieldLabel.length) {
148 cls : 'control-label',
149 html : this.fieldLabel
160 if(this.labelWidth > 12){
161 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
164 if(this.labelWidth < 13 && this.labelmd == 0){
165 this.labelmd = this.labelWidth;
168 if(this.labellg > 0){
169 cfg.cn[0].cls += ' col-lg-' + this.labellg;
170 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
173 if(this.labelmd > 0){
174 cfg.cn[0].cls += ' col-md-' + this.labelmd;
175 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
178 if(this.labelsm > 0){
179 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
180 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
183 if(this.labelxs > 0){
184 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
185 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
188 } else if ( this.fieldLabel.length) {
193 //cls : 'input-group-addon',
194 html : this.fieldLabel
220 * return the real textarea element.
224 return this.el.select('textarea.form-control',true).first();
228 * Clear any invalid styles/messages for this field
230 clearInvalid : function()
233 if(!this.el || this.preventMark){ // not rendered
237 var label = this.el.select('label', true).first();
238 var icon = this.el.select('i.fa-star', true).first();
243 this.el.removeClass( this.validClass);
244 this.inputEl().removeClass('is-invalid');
246 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
248 var feedback = this.el.select('.form-control-feedback', true).first();
251 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
256 this.fireEvent('valid', this);
260 * Mark this field as valid
262 markValid : function()
264 if(!this.el || this.preventMark){ // not rendered
268 this.el.removeClass([this.invalidClass, this.validClass]);
269 this.inputEl().removeClass(['is-valid', 'is-invalid']);
271 var feedback = this.el.select('.form-control-feedback', true).first();
274 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
277 if(this.disabled || this.allowBlank){
281 var label = this.el.select('label', true).first();
282 var icon = this.el.select('i.fa-star', true).first();
287 if (Roo.bootstrap.version == 3) {
288 this.el.addClass(this.validClass);
290 this.inputEl().addClass('is-valid');
294 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
296 var feedback = this.el.select('.form-control-feedback', true).first();
299 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
300 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
305 this.fireEvent('valid', this);
309 * Mark this field as invalid
310 * @param {String} msg The validation message
312 markInvalid : function(msg)
314 if(!this.el || this.preventMark){ // not rendered
318 this.el.removeClass([this.invalidClass, this.validClass]);
319 this.inputEl().removeClass(['is-valid', 'is-invalid']);
321 var feedback = this.el.select('.form-control-feedback', true).first();
324 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
327 if(this.disabled || this.allowBlank){
331 var label = this.el.select('label', true).first();
332 var icon = this.el.select('i.fa-star', true).first();
334 if(!this.getValue().length && label && !icon){
335 this.el.createChild({
337 cls : 'text-danger fa fa-lg fa-star',
338 tooltip : 'This field is required',
339 style : 'margin-right:5px;'
343 if (Roo.bootstrap.version == 3) {
344 this.el.addClass(this.invalidClass);
346 this.inputEl().addClass('is-invalid');
349 // fixme ... this may be depricated need to test..
350 if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
352 var feedback = this.el.select('.form-control-feedback', true).first();
355 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
357 if(this.getValue().length || this.forceFeedback){
358 this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
365 this.fireEvent('invalid', this, msg);