You found a bug! We've classified it as TOUCH-1941 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #21
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    majyer is on a distinguished road

      0  

    Default Why I could scroll in iPad,please see my code(sencha touch 1.1)

    Why I could scroll in iPad,please see my code(sencha touch 1.1)


    ui.TextArea = Ext.extend(Ext.form.TextArea, !Ext.is.iOS ? {} : {
    lastY: undefined,
    lastPos: {},
    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();
    e.stopPropagation(); // this tops scroll going to parent
    }


    // Sencha disables textarea scrolling on iOS by default,
    // so stop propagating the event to delegate to iOS.
    if (!(top && bottom)) {
    e.stopPropagation(); // this tops scroll going to parent
    }
    },

    resizeTexteare: function () {
    var elts = Ext.query('#mytextarea');

    // Get the width of the element
    var width = Ext.get(id).dom.scrollWidth

    // Split the user input based on the line break
    var lines = Ext.getCmp(id).getValue().split('\n');

    // in 100px you put around 14 digits, so using a simple rule of 3 to find out the max width of the line
    // TODO : adapt to font-size
    var max = 14 * width / 100;


    // For each line, compute the nombre of lines occupied
    var nb_lines_area = 0;
    for (var i = 0; i < lines.length; i++) {
    nb_lines_area++; // because we jump a line

    // The line exceed the max width
    if (lines[i].length > max) {
    nb_lines_area += Math.floor(lines[i].length / max);
    }
    }




    // Modify the height of the textarea, knowing that a line is about 20px
    // TODO : adapt to font-size
    var height = 20 * nb_lines_area;


    // My textarea is at least 90px long
    if (height > 90)
    Ext.getCmp(id).setHeight(height + 'px');
    },
    initEvents: function () {
    // var textArea = this.element.select('textarea').elements[0]; // Note: this.getInput() should be the method, but doesn't exist for some reason
    var textArea = this.fieldEl.dom;


    // have to add these events directly to the DOM textarea (as opposed to this.fieldEl.on),
    // otherwise they're handled after Ext.gesture.Manager and preventDefault will already have been called.
    textArea.addEventListener(
    Ext.supports.Touch ? 'touchstart' : 'mousedown',
    Ext.createDelegate(this.handleTouch, this),
    false);


    textArea.addEventListener(
    Ext.supports.Touch ? 'touchmove' : 'mousemove',
    Ext.createDelegate(this.handleMove, this),
    false);




    //this.original.initialize.apply(this, arguments);
    }
    });
    Ext.reg('c_textareafield', ui.TextArea);

    issue1: Can not get the focus,It looks readonly.
    issue2: can not scroll.

  2. #22
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      1  

    Default


    Patch for ST2:
    Code:
    // override 2.0.1 to allow scrolling of textarea on ipad
    Ext.define('Fix.Ext.form.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();
      	}
    });

  3. #23
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    cel_matrix is on a distinguished road

      0  

    Default Text area scroll fix not woking

    Text area scroll fix not woking


    Hi,

    I tried the override function, it is not working if the text area is the last item in a long page and you need to scroll to type in the text area. The cursor is hidden you type more then height of the textarea and suddenly the scroll starts working after typing around 10 lines. Someone please help in fixing this issue.


    Thanks,
    Celmatrix

  4. #24
    Sencha User
    Join Date
    Dec 2010
    Posts
    68
    Vote Rating
    -1
    jairok is an unknown quantity at this point

      0  

    Default


    Hi all!

    Any news about a fix for 2.1 ??

  5. #25
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    cristiandavidgm is on a distinguished road

      0  

    Default


    Worked for me, thank you very very very much

    Quote Originally Posted by joeri View Post
    Patch for ST2:
    Code:
    // override 2.0.1 to allow scrolling of textarea on ipad
    Ext.define('Fix.Ext.form.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();
          }
    });

  6. #26
    Sencha Premium Member
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
    maplydev is on a distinguished road

      0  

    Default


    I assume this hasn't been fixed in 2.2.1 yet. Is that right?

  7. #27
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    jhamlin is on a distinguished road

      0  

    Default


    Doesn't look like it's fixed in 2.3 beta either.

  8. #28
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    Restuta is on a distinguished road

      0  

    Default


    Any official information regarding "when"?

  9. #29
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by Restuta View Post
    Any official information regarding "when"?
    My guess is no. We're at 2.3 and it still doesn't work as desired.

  10. #30
    Sencha User
    Join Date
    Apr 2010
    Posts
    4
    Vote Rating
    0
    cbryant is on a distinguished road

      0  

    Default Wrapped textarea in a scrollable container

    Wrapped textarea in a scrollable container


    I was able to to get the text area to scroll (independently of its outer container), by wrapping it in a scrollable container. This also required including the code posted on this page into the application.

    Code:
        {
            xtype: 'container',
            itemId: 'commentsContainer',
            scrollable: {
                direction: 'vertical'
            },
            flex: 28,
            style: 'border: 1px solid #ccc;',
            items: [{
                xtype:'textareafield',
                id:'comments',
                itemId: 'comments',
                label: 'Comments',
                labelAlign: 'top',
                maxRows: 6,
                autoCapitalize: true,
                clearIcon: false,
                tabIndex: -1,                              
                lastY: undefined
           }]
        }