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'