sencha touch textarea 根据内容的自动增长与缩小

APP上需要做类似微信意见反馈的界面，但是我们用的是sencha touch 。ANDROID 原生的textarea是可以随着内容的变化而逐渐变高和缩小，

然而sencha touch 上的textarea 是定高的，输入超过高度会有可以向下滑的拖动框，高度不会变。

/*
*高度自动增长的文本框
*/
Ext.define('ux.TextArea', {
    extend: 'Ext.field.TextArea',
    xtype: 'autoTextArea',
    config: {
        clearIcon: false,
        //不配置maxRows和lineHeight则没有增长限制
        maxRows: 3,
        lineHeight: 29
    },
    initialize: function () {
        var me = this;
        me.callParent(arguments);
        me.adjustHeight = Ext.Function.createBuffered(function () {
            var textAreaEl = me.getComponent().input;
            if (textAreaEl) {
                var scrollHeight = textAreaEl.dom.scrollHeight,
                height;
                //根据条件调整高度
                if (!me.maxHeight || (me.maxHeight > scrollHeight)) {
                        height = scrollHeight;
                } else {
                    height = me.maxHeight;
                }
                textAreaEl.dom.style.height = 'auto';
                textAreaEl.dom.style.height = height + "px";
            }
        }, 200, me);
        me.on({
            scope: me,
            keyup: 'adjustHeight',
            change: 'adjustHeight',
            painted: 'initHeight'
        });
    },
    //初始化高度
    initHeight: function () {
        var me = this,
            lingHeight = me.getLineHeight(),
            maxRows = me.getMaxRows();
        //如果有设置lineHeight和maxRows会产生一个最高高度
        console.log(lingHeight, maxRows);

        if (lingHeight && maxRows) {
            me.maxHeight = lingHeight * maxRows;
        }
    },
    //重新初始化
    reset: function () {
        var me = this,
            textAreaEl = me.getComponent().input;
        if (textAreaEl && me.getValue().length==0) {
            textAreaEl.dom.style.height = 'auto';
            textAreaEl.dom.style.height = me.getLineHeight() + "29px";
        }
    }
});

CSS

/*#region textarea */
 .x-field-textarea .x-form-field {
    line-height:29px;
    min-height:29px;
    height:34px;
    overflow-y:hidden;
    padding:0.2em 0 0 0.2em;
    border-radius:6px;
}
.x-field-textarea {
    min-height:0;
    border-radius:6px;
}
.x-field-textarea .x-field-input {
    padding-right:0 !important;
}
/*#endregion*/

view

                 itemId: 'textArea',
                 maxRows:'1',
                xtype: 'autoTextArea',
               placeHolder: '说两句',
                margin: '10px 15px'

更改过后可自动增长和缩小的文本框,这个运用了H5的contenteditale属性，有些不兼容

/*
*高度自动增长的文本框
*/
Ext.define('Common.component.TextArea.AutoTextArea', {
    extend: 'Ext.field.TextArea',
    xtype: 'autotextarea',
    config: {
        maxRows:1,
        editCmp:'<div class="editable-div" contenteditable="true" style="line-height:1.5em;width:95%;padding:0.3em 0.5em;" tabIndex="1"></div>'
    },
    initialize: function () {
        this.callParent(arguments);
        this.contentsync = Ext.Function.createBuffered(function () {
            var textAreaEl = this.getComponent().input,
            editdom = textAreaEl.next();
            editdom.dom.innerHTML=this.ctPlaceHolder;
            
        }, 10, this);
        this.on({
            scope: this,
            clearicontap: 'contentsync',
            painted: 'initHeight'
        });
    },
    //初始化高度
    initHeight: function () {
        var me = this, textAreaEl = this.getComponent().input;
        textAreaEl.insertHtml('afterEnd',this.getEditCmp());
        textAreaEl.hide();
        me.ctPlaceHolder = '<span class="custom-placeholder">'+this.getPlaceHolder()+'</span>';
        var editdom = textAreaEl.next();
        if (this.getValue()!= '') {
        	editdom.dom.innerHTML = this.getValue();//Value有设定时需要同步
        } else {
        	editdom.dom.innerHTML = me.ctPlaceHolder;
        }
        
		this.element.on( {
            focus: {
		        fn: function () {
		        	if (me.getValue() == '') {
		        		editdom.dom.innerHTML = '';
		        	}
		        },
		        delegate :'.editable-div',
		        scope:me
            },
            
            blur:{
		        fn: function () {
		        	if (me.getValue() == '') {
		        		editdom.dom.innerHTML = me.ctPlaceHolder;
		        	}
		        },
		        delegate :'.editable-div',
		        scope:me
            },
            keyup: {
		        fn: function () {
		            me.setValue(editdom.dom.innerHTML);
		        },
		        delegate :'.editable-div',
		        scope:me
            },
            change: {
		        fn: function () {
		            me.setValue(editdom.dom.innerHTML);
		        },
		        delegate :'.editable-div',
		        scope:me
            }
		
        });
    }
});

view界面上
         {
                xtype: 'autotextarea',
                name: 'advicemsg',
                cls:'advice',
                tabIndex: -1,
                placeHolder:'说说您遇到的问题，将为您不断改进~'
            }