TextArea2.html
10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-form-field-TextArea'>/**
</span> * @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}" ',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' autocomplete="off">\n',
'<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
'</textarea>',
{
disableFormats: true
}
],
<span id='Ext-form-field-TextArea-cfg-growMin'> /**
</span> * @cfg {Number} growMin
* The minimum height to allow when {@link #grow}=true
*/
growMin: 60,
<span id='Ext-form-field-TextArea-cfg-growMax'> /**
</span> * @cfg {Number} growMax
* The maximum height to allow when {@link #grow}=true
*/
growMax: 1000,
<span id='Ext-form-field-TextArea-cfg-growAppend'> /**
</span> * @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-',
<span id='Ext-form-field-TextArea-cfg-cols'> /**
</span> * @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,
<span id='Ext-form-field-TextArea-cfg-rows'> /**
</span> * @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,
<span id='Ext-form-field-TextArea-cfg-enterIsSpecial'> /**
</span> * @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,
<span id='Ext-form-field-TextArea-cfg-preventScrollbars'> /**
</span> * @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,
// 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);
},
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);
}
// 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.CTRL) {
return key === e.A || key === e.C || key === e.V || key === e.X;
}
return false;
},
<span id='Ext-form-field-TextArea-method-autoSize'> /**
</span> * 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) {
<span id='Ext-form-field-TextArea-event-autosize'> /**
</span> * @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.delay();
}
this.callParent();
}
});</pre>
</body>
</html>