您的位置:首页 > 其它

sencha touch 可自动增长高度TextArea

2014-03-05 20:54 204 查看
js代码如下:

/*
*高度自动增长的文本框
*/
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*/


使用示例:

flex: 3,
itemId: 'textArea',
xtype: 'autoTextArea',
placeHolder: '说两句',
margin: '10px 15px'
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: