我想创建一个用户可以在iPad上滚动的全屏(或屏幕的一部分)文本区域。
类似于Notes.app的东西:有一个可以包含大量文本的屏幕/面板,它是可滚动的。
如果点击它,则可以编辑文本。有没有合适的组件或解决方法?
谢谢!
答案 0 :(得分:0)
据我所知,Sencha Touch中的TextArea没有这个“可滚动”属性。
在我的应用程序中,我使用了一种解决方法,覆盖了TextArea组件,这里是代码:
Ext.define('Ext.overrides.TextArea', {
override: 'Ext.form.TextArea',
initialize: function() {
this.callParent();
this.element.dom.addEventListener(
Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
this.handleTouchListener = Ext.bind(this.handleTouch, this),
false);
this.element.dom.addEventListener(
Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
this.handleMoveListener = Ext.bind(this.handleMove, this),
false);
this.moveListenersAttached = true;
},
destroy: function() {
// cleanup event listeners to avoid memory leak
if (this.moveListenersAttached) {
this.moveListenersAttached = false;
this.element.dom.removeEventListener(
Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
this.handleTouchListener,
false);
this.element.dom.removeEventListener(
Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
this.handleMoveListener,
false);
this.handleTouchListener = this.handleMoveListener = null;
};
this.callParent();
},
handleTouch: function(e) {
this.lastY = e.pageY;
},
handleMove: function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY;
// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if((top && up) || (bottom && down)) e.preventDefault();
// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if(!(top && bottom)) e.stopPropagation();
}
});