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'
],
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}" ',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' autocomplete="off">\n',
'<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
'</textarea>',
{
disableFormats: true
}
],
growMin: 60,
growMax: 1000,
growAppend: '\n-',
cols: 20,
rows: 4,
enterIsSpecial: false,
preventScrollbars: false,
componentLayout: 'textareafield',
setGrowSizePolicy: Ext.emptyFn,
returnRe: /\r/g,
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);
}
},
transformRawValue: function(value){
return this.stripReturns(value);
},
transformOriginalValue: function(value){
return this.stripReturns(value);
},
valueToRaw: function(value){
value = this.stripReturns(value);
return this.callParent([value]);
},
stripReturns: function(value){
if (value) {
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);
}
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);
}
},
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.CTRL) {
return key === e.A || key === e.C || key === e.V || key === e.X;
}
return false;
},
autoSize: function() {
var me = this,
height;
if (me.grow && me.rendered) {
me.updateLayout();
height = me.inputEl.getHeight();
if (height !== me.lastInputHeight) {
me.fireEvent('autosize', me, height);
me.lastInputHeight = height;
}
}
},
initAria: function() {
this.callParent(arguments);
this.getActionEl().dom.setAttribute('aria-multiline', true);
},
beforeDestroy: function(){
var task = this.pasteTask;
if (task) {
task.delay();
}
this.callParent();
}
});