sencha touch 可自动增长高度TextArea
2014-03-05 20:54
204 查看
js代码如下:
css:
使用示例:
/* *高度自动增长的文本框 */ 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'
相关文章推荐
- sencha touch textarea 根据内容的自动增长与缩小
- Extjs4 textarea文本框高度随内容自动增长
- 【记录】用Javascript实现文本框textarea高度随内容自动适应增长收缩
- textarea文本域宽度和高度width及height自动适应实现代码
- textarea自动换行,且文本框根据输入内容自适应高度
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
- textarea 自动适应高度
- 让文本框textarea自动适应内容的高度
- textarea自动适应高度
- textarea高度自适应自动展开
- sencha touch Carousel 自动切换
- js控制textarea输入框根据内容自动适应高度
- textarea高度随内容自动伸缩
- textarea自动调节高度
- 自适应的textarea 自动调整高度
- Sencha touch中Ext.List如何高度自适应的解决方法
- 让文本框textarea自动适应内容的高度
- 让文本框textarea自动适应内容的高度
- iframe的高度随内容的多而自动增长
- HTML的TextArea标记跟随文本内容自动设置高度