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:'说说您遇到的问题，将为您不断改进~'
}