js代码如下：
1 /*
2 *高度自动增长的文本框
3 */
4 Ext.define('ux.TextArea', {
5 extend: 'Ext.field.TextArea',
6 xtype: 'autoTextArea',
7 config: {
8 clearIcon: false,
9 //不配置maxRows和lineHeight则没有增长限制
10 maxRows: 3,
11 lineHeight: 29
12 },
13 initialize: function () {
14 var me = this;
15 me.callParent(arguments);
16 me.adjustHeight = Ext.Function.createBuffered(function () {
17 var textAreaEl = me.getComponent().input;
18 if (textAreaEl) {
19 var scrollHeight = textAreaEl.dom.scrollHeight,
20 height;
21 //根据条件调整高度
22 if (!me.maxHeight || (me.maxHeight > scrollHeight)) {
23 height = scrollHeight;
24 } else {
25 height = me.maxHeight;
26 }
27 textAreaEl.dom.style.height = 'auto';
28 textAreaEl.dom.style.height = height + "px";
29 }
30 }, 200, me);
31 me.on({
32 scope: me,
33 keyup: 'adjustHeight',
34 change: 'adjustHeight',
35 painted: 'initHeight'
36 });
37 },
38 //初始化高度
39 initHeight: function () {
40 var me = this,
41 lingHeight = me.getLineHeight(),
42 maxRows = me.getMaxRows();
43 //如果有设置lineHeight和maxRows会产生一个最高高度
44 console.log(lingHeight, maxRows);
45
46 if (lingHeight && maxRows) {
47 me.maxHeight = lingHeight * maxRows;
48 }
49 },
50 //重新初始化
51 reset: function () {
52 var me = this,
53 textAreaEl = me.getComponent().input;
54 if (textAreaEl && me.getValue().length==0) {
55 textAreaEl.dom.style.height = 'auto';
56 textAreaEl.dom.style.height = me.getLineHeight() + "29px";
57 }
58 }
59 });css：
1 /*#region textarea */
2 .x-field-textarea .x-form-field {
3 line-height:29px;
4 min-height:29px;
5 height:34px;
6 overflow-y:hidden;
7 padding:0.2em 0 0 0.2em;
8 border-radius:6px;
9 }
10 .x-field-textarea {
11 min-height:0;
12 border-radius:6px;
13 }
14 .x-field-textarea .x-field-input {
15 padding-right:0 !important;
16 }
17 /*#endregion*/使用示例：
1 flex: 3,
2 itemId: 'textArea',
3 xtype: 'autoTextArea',
4 placeHolder: '说两句',
5 margin: '10px 15px'
