/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* @docauthor Robert Dougan <rob@sencha.com>
|
*
|
* This class creates a multiline text field, which can be used as a direct replacement for traditional
|
* textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
|
* fit its content.
|
*
|
* All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
|
*
|
* Example usage:
|
*
|
* @example
|
* Ext.create('Ext.form.FormPanel', {
|
* title : 'Sample TextArea',
|
* width : 400,
|
* bodyPadding: 10,
|
* renderTo : Ext.getBody(),
|
* items: [{
|
* xtype : 'textareafield',
|
* grow : true,
|
* name : 'message',
|
* fieldLabel: 'Message',
|
* anchor : '100%'
|
* }]
|
* });
|
*
|
* Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}.
|
* These allow you to set the minimum and maximum grow heights for the textarea.
|
*
|
* **NOTE:** In some browsers, carriage returns ('\r', not to be confused with new lines)
|
* will be automatically stripped out the value is set to the textarea. Since we cannot
|
* use any reasonable method to attempt to re-insert these, they will automatically be
|
* stripped out to ensure the behaviour is consistent across browser.
|
*/
|
Ext.define('Ext.form.field.TextArea', {
|
extend:'Ext.form.field.Text',
|
alias: ['widget.textareafield', 'widget.textarea'],
|
alternateClassName: 'Ext.form.TextArea',
|
requires: [
|
'Ext.XTemplate',
|
'Ext.layout.component.field.TextArea',
|
'Ext.util.DelayedTask'
|
],
|
|
// This template includes a `\n` after `<textarea>` opening tag so that an
|
// initial value starting with `\n` does not lose its first character when
|
// the markup is parsed. Both textareas below have the same value:
|
//
|
// <textarea>initial value</textarea>
|
//
|
// <textarea>
|
// initial value
|
// </textarea>
|
//
|
fieldSubTpl: [
|
'<textarea id="{id}" {inputAttrTpl}',
|
'<tpl if="name"> name="{name}"</tpl>',
|
'<tpl if="rows"> rows="{rows}" </tpl>',
|
'<tpl if="cols"> cols="{cols}" </tpl>',
|
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
|
'<tpl if="size"> size="{size}"</tpl>',
|
'<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
|
'<tpl if="readOnly"> readonly="readonly"</tpl>',
|
'<tpl if="disabled"> disabled="disabled"</tpl>',
|
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
|
' class="{fieldCls} {typeCls} {inputCls}" ',
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
' autocomplete="off">\n',
|
'<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
|
'</textarea>',
|
{
|
disableFormats: true
|
}
|
],
|
|
/**
|
* @cfg {Number} growMin
|
* The minimum height to allow when {@link #grow}=true
|
*/
|
growMin: 60,
|
|
/**
|
* @cfg {Number} growMax
|
* The maximum height to allow when {@link #grow}=true
|
*/
|
growMax: 1000,
|
|
/**
|
* @cfg {String} growAppend
|
* A string that will be appended to the field's current value for the purposes of calculating the target field
|
* size. Only used when the {@link #grow} config is true. Defaults to a newline for TextArea to ensure there is
|
* always a space below the current line.
|
*/
|
growAppend: '\n-',
|
|
/**
|
* @cfg {Number} cols
|
* An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
|
* configured {@link #width} and is not given a width by its container's layout.
|
*/
|
cols: 20,
|
|
/**
|
* @cfg {Number} rows
|
* An initial value for the 'rows' attribute on the textarea element. This is only used if the component has no
|
* configured {@link #height} and is not given a height by its container's layout. Defaults to 4.
|
*/
|
rows: 4,
|
|
/**
|
* @cfg {Boolean} enterIsSpecial
|
* True if you want the ENTER key to be classed as a special key and the {@link #specialkey} event to be fired
|
* when ENTER is pressed.
|
*/
|
enterIsSpecial: false,
|
|
/**
|
* @cfg {Boolean} preventScrollbars
|
* true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
|
* relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
|
*/
|
preventScrollbars: false,
|
|
// private
|
componentLayout: 'textareafield',
|
|
setGrowSizePolicy: Ext.emptyFn,
|
|
returnRe: /\r/g,
|
|
inputCls: Ext.baseCSSPrefix + 'form-textarea',
|
|
// private
|
getSubTplData: function() {
|
var me = this,
|
fieldStyle = me.getFieldStyle(),
|
ret = me.callParent();
|
|
if (me.grow) {
|
if (me.preventScrollbars) {
|
ret.fieldStyle = (fieldStyle||'') + ';overflow:hidden;height:' + me.growMin + 'px';
|
}
|
}
|
|
Ext.applyIf(ret, {
|
cols: me.cols,
|
rows: me.rows
|
});
|
|
return ret;
|
},
|
|
afterRender: function () {
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.needsMaxCheck = me.enforceMaxLength && me.maxLength !== Number.MAX_VALUE && !Ext.supports.TextAreaMaxLength;
|
if (me.needsMaxCheck) {
|
me.inputEl.on('paste', me.onPaste, me);
|
}
|
},
|
|
// The following overrides deal with an issue whereby some browsers
|
// will strip carriage returns from the textarea input, while others
|
// will not. Since there's no way to be sure where to insert returns,
|
// the best solution is to strip them out in all cases to ensure that
|
// the behaviour is consistent in a cross browser fashion. As such,
|
// we override in all cases when setting the value to control this.
|
transformRawValue: function(value){
|
return this.stripReturns(value);
|
},
|
|
transformOriginalValue: function(value){
|
return this.stripReturns(value);
|
},
|
|
getValue: function(){
|
return this.stripReturns(this.callParent());
|
},
|
|
valueToRaw: function(value){
|
value = this.stripReturns(value);
|
return this.callParent([value]);
|
},
|
|
stripReturns: function(value){
|
if (value && typeof value === 'string') {
|
value = value.replace(this.returnRe, '');
|
}
|
return value;
|
},
|
|
onPaste: function(e){
|
var me = this;
|
if (!me.pasteTask) {
|
me.pasteTask = new Ext.util.DelayedTask(me.pasteCheck, me);
|
}
|
// since we can't get the paste data, we'll give the area a chance to populate
|
me.pasteTask.delay(1);
|
},
|
|
pasteCheck: function(){
|
var me = this,
|
value = me.getValue(),
|
max = me.maxLength;
|
|
if (value.length > max) {
|
value = value.substr(0, max);
|
me.setValue(value);
|
}
|
},
|
|
// private
|
fireKey: function(e) {
|
var me = this,
|
key = e.getKey(),
|
value;
|
|
if (e.isSpecialKey() && (me.enterIsSpecial || (key !== e.ENTER || e.hasModifier()))) {
|
me.fireEvent('specialkey', me, e);
|
}
|
|
if (me.needsMaxCheck && key !== e.BACKSPACE && key !== e.DELETE && !e.isNavKeyPress() && !me.isCutCopyPasteSelectAll(e, key)) {
|
value = me.getValue();
|
if (value.length >= me.maxLength) {
|
e.stopEvent();
|
}
|
}
|
},
|
|
isCutCopyPasteSelectAll: function(e, key) {
|
if (e.ctrlKey) {
|
return key === e.A || key === e.C || key === e.V || key === e.X;
|
}
|
return false;
|
},
|
|
/**
|
* Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
|
* only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
|
*/
|
autoSize: function() {
|
var me = this,
|
height;
|
|
if (me.grow && me.rendered) {
|
me.updateLayout();
|
height = me.inputEl.getHeight();
|
if (height !== me.lastInputHeight) {
|
/**
|
* @event autosize
|
* Fires when the {@link #autoSize} function is triggered and the field is resized according to
|
* the grow/growMin/growMax configs as a result. This event provides a hook for the developer
|
* to apply additional logic at runtime to resize the field if needed.
|
* @param {Ext.form.field.Text} this
|
* @param {Number} height
|
*/
|
me.fireEvent('autosize', me, height);
|
me.lastInputHeight = height;
|
}
|
}
|
},
|
|
// private
|
initAria: function() {
|
this.callParent(arguments);
|
this.getActionEl().dom.setAttribute('aria-multiline', true);
|
},
|
|
beforeDestroy: function(){
|
var task = this.pasteTask;
|
if (task) {
|
task.cancel();
|
this.pasteTask = null;
|
}
|
this.callParent();
|
}
|
});
|
