Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 23

Thread: Change in validation state causes form to scroll

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #11

    Default

    I think the bug is related to validateOnChange or validateOnBlur events. When I disable one of them, the scroll stops during change or blur.

  2. #12
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    8

    Default

    I'll just add my experience here. If grow:true is assigned to a textbox that is far down on a form, it scrolls to top when typing. For me, this renders the use of grow:true useless in forms. It would be good to have a fix on this one.

  3. #13
    Sencha User
    Join Date
    May 2009
    Posts
    4

    Default

    Try to specify vbox layout manager for optionsform:
    Code:
     items: [{
         xtype: 'optionsform',
         region: 'center',
         layout: {
               type: 'vbox',
               align: 'stretch'
         }
         autoScroll: true
    }]
    Worked for me (4.2.1).

  4. #14
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196

    Lightbulb Possible work-around

    See this post.

    I haven't tested it yet. Maybe there's hope...
    Yaron Yogev

    IT Software Developer

  5. #15
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    18

    Thumbs up Suitable workaround

    To specify the layout with
    Code:
    layout: {type: 'vbox', align: 'stretch'}
    fixed it for me as I was applying
    Code:
    overflowY: 'auto'
    to a formPanel (which default layout is anchor).

    Hope it will help other people with the same problem while waiting for a more suitable solution!

  6. #16
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    370

    Default

    This bug is still going strong in ExtJS 5...
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly

    Jarvus builds and optimizes top-quality Sencha Touch and ExtJS apps for open-source projects and clients of all sizes.

    Don't waste time with bugs that have already been found and fixed by the community, compile our tried and tested hotfixes packages into all your projects: https://github.com/JarvusInnovations/sencha-hotfixes

  7. #17
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,519

    Default

    Quote Originally Posted by themightychris View Post
    This bug is still going strong in ExtJS 5...
    I just bump with this on 5.0.2

    UI: Sencha Architect / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: WildFly / Weblogic
    Databases: Oracle
    / MySQL / DB2 / Firebird

    If you like my answer please vote!

  8. #18
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    164

    Default

    Using

    PHP Code:
    layout: {type'vbox'align'stretch'
    Had worked for me in 5.0 but the bug came back in 5.1. I'm hoping to create a reduction to be able to show Sencha the bug in action.

    My specific case didn't require a text area, any form fields in a nest vbox/align:'strech' that had scollbars caused the form to scroll if you typed in a text field at the bottom of the panel area.

    My hack was like another from somewhere in one of the related threads, In my controller for a custom form:

    PHP Code:
        'processparameters field': {
            
    focus: function() {Ext.suspendLayouts()},
            
    blur: function(){Ext.resumeLayouts(true)}
        } 
    It caused some sluggishness when a field had focus and I tried to move the splitter around my form.

    Actually nevermind, it causes combo boxes not to show the drop down.


    See http://www.sencha.com/forum/showthre...e-writing-area

  9. #19
    Sencha Premium Member
    Join Date
    Jan 2015
    Posts
    9

    Default

    This problem still exists in 5.1.
    Is there any workaround for it?

  10. #20
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    164

    Default Simple reproduction of the problem

    Here's an example where it gets jumpy https://fiddle.sencha.com/#fiddle/jd6

    From my debugging this happens when you have a layout where one of the items does not have a height set. In my case, it's because I want the items to grow with its content, so I have a scrollbar for the container, instead of a scrollbar in each item within the container.

    The following override fixes the problem

    PHP Code:
    Ext.define('EXTJS-16350.layout.container.Box', {
        
    override'Ext.layout.container.Box',

        
    beginLayout: function(ownerContext) {
            var 
    me this,
                
    owner me.owner,
                
    smp owner.stretchMaxPartner,
                
    style me.innerCt.dom.style,
                
    names me.names,
                
    overflowHandler me.overflowHandler,
                
    scrollable owner.getScrollable(),
                
    scrollPos;

            
    ownerContext.boxNames names;

            if (
    scrollable) {
                
    // If we have a scrollable, save the positions regardless of whether we can scroll in that direction
                // since the scrollable may be configured with x: false, y: false, which means it can only be
                // controlled programmatically
                
    ownerContext.scrollRestore scrollable.getPosition();
            }

            
    // this must happen before callParent to allow the overflow handler to do its work
            // that can effect the childItems collection...
            
    if (overflowHandler) {
                
    overflowHandler.beginLayout(ownerContext);
            }

            
    // get the contextItem for our stretchMax buddy:
            
    if (typeof smp === 'string') {
                
    smp Ext.getCmp(smp) || owner.query(smp)[0];
            }

            
    ownerContext.stretchMaxPartner smp && ownerContext.context.getCmp(smp);

            
    me.callParent(arguments);

            
    ownerContext.innerCtContext ownerContext.getEl('innerCt'me);
            
    ownerContext.targetElContext ownerContext.getEl('targetEl'me);

            
    ownerContext.ownerScrollable scrollable owner.getScrollable();

            
    // Don't allow sizes burned on to the innerCt to influence measurements.
            
    style.width '';
            
    style.height '';
        },

        
    completeLayout: function(ownerContext) {
            var 
    me this,
                
    names ownerContext.boxNames,
                
    invalidateScrollX ownerContext.invalidateScrollX,
                
    invalidateScrollY ownerContext.invalidateScrollY,
                
    overflowHandler me.overflowHandler,
                
    scrollRestore ownerContext.scrollRestore,
                
    domeloverflowXoverflowYstylesscrollscrollable;

            if (
    overflowHandler) {
                
    overflowHandler.completeLayout(ownerContext);
            }

            if (
    invalidateScrollX || invalidateScrollY) {
                
    el me.getTarget();
                
    dom el.dom;
                
    styles dom.style;

                if (
    invalidateScrollX) {
                    
    // get computed style to see if we are 'auto'
                    
    overflowX el.getStyle('overflowX');
                    if (
    overflowX === 'auto') {
                        
    // capture the inline style (if any) so we can restore it later:
                        
    overflowX styles.overflowX;
                        
    styles.overflowX 'scroll'// force the scrollbar to appear
                    
    } else {
                        
    invalidateScrollX false// no work really since not 'auto'
                    
    }
                }

                if (
    invalidateScrollY) {
                    
    // get computed style to see if we are 'auto'
                    
    overflowY el.getStyle('overflowY');
                    if (
    overflowY === 'auto') {
                        
    // capture the inline style (if any) so we can restore it later:
                        
    overflowY styles.overflowY;
                        
    styles.overflowY 'scroll'// force the scrollbar to appear
                    
    } else {
                        
    invalidateScrollY false// no work really since not 'auto'
                    
    }
                }

                if (
    invalidateScrollX || invalidateScrollY) { // if (some form of 'auto' in play)
                    // force a reflow...
                    
    dom.scrollWidth// jshint ignore:line

                    
    if (invalidateScrollX) {
                        
    styles.overflowX overflowX// restore inline style
                    
    }
                    if (
    invalidateScrollY) {
                        
    styles.overflowY overflowY// restore inline style
                    
    }
                }
            }
            if (
    scrollRestore) {
                
    ownerContext.ownerScrollable.scrollTo(scrollRestore.xscrollRestore.y);
            }
        }
    }); 

Page 2 of 3 FirstFirst 123 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •