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. #11
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    Hi Ric

    Thanks for the reply - I will take a look and get back to you.

    Chris

  2. #12
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    Hi Ric

    Thanks for your info - it led me to a solution.

    This is what I came up with - it works for me in Sencha Touch 1 but maybe it will require a little adjustment for version 2:

    PHP Code:
      Ext.overrideOriginal(Ext.form.TextArea, !Ext.is.iOS ? {} : {
       
    lastYundefined,
       
    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;

        var 
    textAreaCmp Ext.getCmp(textArea.parentElement.parentElement.id);
        var 
    form textAreaCmp.up('form');
        
    form.scroller.disable();

        
    textArea.setAttribute('readonly''readonly');
        
    textArea.setAttribute('disabled''true');
        
    Ext.defer(function() {
         
    textArea.blur();
         
    textArea.removeAttribute('readonly');
         
    textArea.removeAttribute('disabled');
        }, 
    10);

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

       
    handleUp: function(e) {
        var 
    textArea e.target;
        var 
    textAreaCmp Ext.getCmp(textArea.parentElement.parentElement.id);
        var 
    form textAreaCmp.up('form');
        
    form.scroller.enable();
       },

       
    initEvents: function() {
        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.handleTouchthis),
         
    false);

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

        
    textArea.addEventListener(
         
    Ext.supports.Touch 'touchend' 'dragend',
         
    Ext.createDelegate(this.handleUpthis),
         
    false);

        
    this.original.initEvents.apply(thisarguments);
       },
      }); 
    The only thing it doesn't give access to is the in field magnifying glass which I would like but don't have time to work out now.

    Thanks also to all others who contributed the original idea and I hope this helps other people while version 2 of the library is being modified to include it.

    Chris

  3. #13
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default


    So my sort of hacky version ported to ST2 looks kind of like this. I didn't have a need to traverse to the parent and prevent scrolling there. Is there a more approved way to see if you're on ipad than saying Ext.browser.isSafari, or is that the Official Way?


    Code:
    Ext.overrideOriginal(Ext.form.TextArea, !Ext.browser.is.Chrome && !Ext.browser.is.Safari ? {} : {
       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
        }
       },
    
    
       initialize: function() {
        var textArea = this.element.select('textarea').elements[0]; // Note: this.getInput() should be the method, but doesn't exist for some reason
    
    
        // 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.bind(this.handleTouch, this),
         false);
    
    
         textArea.addEventListener(
         Ext.supports.Touch ? 'touchmove' : 'mousemove',
         Ext.bind(this.handleMove, this),
         false);
    
    
        this.original.initialize.apply(this, arguments);
       },
      });

  4. #14
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    Thanks for the fix. I have the following error on the first line. Any idea ?

    Code:
    TypeError: 'undefined' is not a function (evaluating 'Ext.overrideOriginal')

  5. #15
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default


    Oh sorry, I took that overrideoriginal function from the very start of the thread. I didn't include it because I didn't want to thread-crap

  6. #16
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    Indeed thank you. However the code does not work with Sencha Touch 2 and Phonegap 1.9 on the latest iOS. Do you think it is related to Phonegap ?

    Edit :
    I found a workaround : I increase the height of the textarea when the user adds a new line or write a line that exceeds the max-length. It is a little dirty but it works fine and the user experience is way better than having to scroll...

  7. #17
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    For those that might be interested, here is an overview of the code I am using. It may not be textbook JS but it works. The following needs to be binded to the textarea "keyup" event (told you it may be dirty )

    Code:
    //Resize a textarea depending on the user input lengthresizeTexteare: 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');
    },

  8. #18
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    48
    Vote Rating
    1
    yoh.suzuki is on a distinguished road

      0  

    Default


    This is how I gave the TextArea the auto-expanding behavior:

    Code:
    Ext.define('ExpandingTextArea', {
        extend: 'Ext.form.TextArea',   
        initialize: function() {
            var textArea = this.getComponent().input; 
            textArea.on('keyup',  function(e) {
                textArea.style.height = textArea.scrollHeight+'px';
            });
            this.callParent(arguments);
        }
    });

  9. #19
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    Damn your code is way better

    I am using a textareafield element, so your code was not working out of the box. Here is the code I am using, with id being the id of the textareafield element.

    Code:
    var elts = Ext.query('#' + id + ' textarea');Ext.getCmp(id).setHeight(Ext.get(elts[0].id).dom.scrollHeight + 'px');
    


    Thanks a lot

  10. #20
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default


    I'm not sure what to tell you about the phonegap problem. Though I can tell you that I did have to change my posted solution to not use Ext.supports.Touch (deprecated) and instead use Ext.feature.has.Touch.

    Fwiw it's

    Code:
    Ext.overrideOriginal = function(obj, overrides) {  var original = {};
      for(prop in overrides)
        if(overrides.hasOwnProperty(prop) && Ext.isFunction(obj.prototype[prop]))
          original[prop] = obj.prototype[prop];
      Ext.override(obj, Ext.applyIf(overrides, { original: original }));
    };
    right before my Ext.application({...})

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi