sencha touch 可自动增长高度TextArea

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'