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
    38
    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
    38
    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({...})

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar