Scrollable text area on sencha touch 2 on iPad

Question

I'd like to make a full screen (or a part of screen) text area that user can scroll on iPad.

Something similar to the Notes.app: there's a screen/panel that can contain a lot of text, and it is scrollable.

If you tap on it, you can edit the text. 

Is there any suitable component or workaround?



Thanks!

Answer 1

As far as I know, TextArea in Sencha Touch doesn't have this "scrollable" property.

In my app I used a workaround, overriding the TextArea component, here is the code:

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();
            }
        });