You found a bug! We've classified it as EXTJS-7103 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #11
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129
    Vote Rating
    6
    Gjslick will become famous soon enough

      0  

    Default


    @Animal I was super hopeful, but unfortunately adding hideMode: 'offsets' to each component in my example fiddle doesn't seem to have any effect. If the first panel is scrolled down, expanding/collapsing any of the other panels resets its scroll position. http://jsfiddle.net/hJcQ3/6

    @Mankz Unfortunately, it seems to be an issue in every browser, with the biggest issue being in IE (as per usual..).

  2. #12
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129
    Vote Rating
    6
    Gjslick will become famous soon enough

      0  

    Default


    Ok, using the following minimalist example, I narrowed the problem down to the shrinkwrapping functionality (at least for this case).

    Code:
    <html>
    <head>
        <link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css" />
        <script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
        <script>
            Ext.onReady( function() {
                var mainContainer = Ext.create( 'Ext.container.Container', {
                    renderTo: 'testDiv',
                    style : { border: '1px solid blue' },
    
    
                    layout: 'auto',
    
    
                    items: {
                        xtype: 'component',
                        autoScroll: true,
                        maxHeight: 100,
                        
                        html: '1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>'
                    }
                } );
    
    
                Ext.get( 'updateLayoutLink' ).on( 'click', function() {
                    mainContainer.updateLayout();
                } );
            } );
        </script>
    </head>
    
    <body>
        <div id="testDiv"></div>
        <a id="updateLayoutLink" href="javascript:;">Update Layout</a>
    </body>
    </html>
    The exact reason that the scroll position is lost when a layout is executed is because:
    1) The explicit height of the component ('100px') is removed, and then
    2) The explicit height of '100px' is put back.

    When the explicit height of 100px is removed, the component goes to its auto size. The auto size is its full content height, so it no longer has any scroll height. Therefore, its scrollTop is reset back to 0. Then, when the explicit height is re-added again, we still have the scrollTop at 0 - not the original scrollTop.

    The explicit height removal in this example happens in the Auto component layout's beginLayoutCycle() method. http://docs.sencha.com/ext-js/4-1/so...ginLayoutCycle. The statement which is executed is: owner.el.setHeight(null); Try out my example and set your debugger to break on that statement (it's line 43297 of ext-all-debug.js), then step over. You'll see what I mean.

    Hope this helps to assist in figuring out a workaround!

  3. #13
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Try this:

    Code:
    Ext.override(Ext.layout.Component.Auto, {
        beginLayoutCycle: function(ownerContext, firstCycle){
            var me = this,
                lastWidthModel = me.lastWidthModel,
                lastHeightModel = me.lastHeightModel,
                owner = me.owner;
                
            me.callParent(arguments);
                
            if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
                owner.el.setWidth(owner.minWidth || null);
            }
                
            if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
                owner.el.setHeight(owner.minHeight || null);
            }
        }
    });
    So your minHeight setting should prevent resetting all the way back (which is needed when laying out a shrinkwrapped item - it should relinquish any previously set height), it should fall back to its minHeight.

  4. #14
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Of course the "release" of height constraints which is what that reset is all about must only allow it to reach your maximum.

    So the fix is

    Code:
    Ext.override(Ext.layout.Component.Auto, {
        beginLayoutCycle: function(ownerContext, firstCycle){
            var me = this,
                lastWidthModel = me.lastWidthModel,
                lastHeightModel = me.lastHeightModel,
                owner = me.owner;
    
            me.callParent(arguments);
    
            if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
                owner.el.setWidth(owner.maxWidth || null);
            }
    
            if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
                owner.el.setHeight(owner.maxHeight || null);
            }    
        }
    }0;
    I'll get the fix in.

  5. #15
    Sencha User
    Join Date
    Dec 2011
    Posts
    7
    Vote Rating
    0
    Hooped is on a distinguished road

      0  

    Default


    Thanks Gjslick for all that work you did with your break down and thanks Animal for the work around and letting us know you'll get a fix in.

  6. #16
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    129
    Vote Rating
    6
    Gjslick will become famous soon enough

      1  

    Default


    Hey guys, wow, sorry for the superlate reply. I didn't notice that you guys posted!

    Animal, that would be an awesome fix, and it actually fixes the accordion issue too, except that it doesn't allow the content to re-shrink afterwards... Check out this example: http://jsfiddle.net/gjslick/MNyCa/1/

    Code:
    <html>
    <head>
        <link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css" />
        <script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
        <script>
            Ext.override(Ext.layout.component.Auto, {
                beginLayoutCycle: function(ownerContext, firstCycle){
                    var me = this,
                        lastWidthModel = me.lastWidthModel,
                        lastHeightModel = me.lastHeightModel,
                        owner = me.owner;
        
                    me.callParent(arguments);
        
                    if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
                        owner.el.setWidth(owner.maxWidth || null);
                    }
        
                    if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
                        owner.el.setHeight(owner.maxHeight || null);
                    }    
                }
            });
            
        
            Ext.onReady( function() {
                var mainContainer = Ext.create( 'Ext.container.Container', {
                    renderTo: 'testDiv',
                    style : { border: '1px solid blue' },
    
                    layout: 'auto',
    
                    items: {
                        xtype: 'component',
                        id: 'contentComponent',
                        autoScroll: true,
                        maxHeight: 100,
                        
                        html: "Shrunken Content"
                    }
                } );
    
    
                Ext.get( 'updateLayoutLink' ).on( 'click', function() {
                    mainContainer.updateLayout();
                } );
                
                Ext.get( 'addContent' ).on( 'click', function() {
                    Ext.getCmp( 'contentComponent' ).update( "1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>" );
                } );
                
                Ext.get( 'removeContent' ).on( 'click', function() {
                    Ext.getCmp( 'contentComponent' ).update( "Test Shrink" );
                } );
            } );
        </script>
    </head>
    
    
    <body>
        <div id="testDiv"></div><br><br>
        
        <a id="updateLayoutLink" href="javascript:;">Update Layout</a><br><br>
        <a id="addContent" href="javascript:;">Add Content</a><br><br>
        <a id="removeContent" href="javascript:;">Remove Content</a>
    </body>
    </html>
    First click "Add Content," and then "Remove Content." Without the override, it shrinks correctly.

    I
    think you're on the right track though, not allowing the component to expand past its maximums when re-laying out. This maintains the scroll position. Perhaps we need something to shrink it back during the "calculate", or in one of the "after" phases?

  7. #17
    Sencha User
    Join Date
    Nov 2011
    Location
    Russia, Moscow
    Posts
    11
    Vote Rating
    0
    jmaxt is on a distinguished road

      0  

    Default


    Hi. I faced with this bug too.
    Gjslick, thank you for solution.
    To sencha developers:
    Will you fix this bug in 4.2?

  8. #18
    Sencha User
    Join Date
    Dec 2011
    Posts
    7
    Vote Rating
    0
    Hooped is on a distinguished road

      0  

    Default


    Thought I'd throw this out there in case it helps anyone else.

    I ended up using this:
    Code:
    Ext.suspendLayouts()
    
    container.add([array,of,items])
    
    Ext.resumeLayouts(true)
    Using that, I was able to dynamically add items to the container as the user was scrolling without it resetting the scroll position a back to the top.

    Before I was just doing a single add like I am now, but if layout was running, it caused the problem. I'm assuming if layout is active when adding items that's when it goes through turning off scrolling as mentioned above, but not sure.

  9. #19
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    hassan.mahmood05 is on a distinguished road

      0  

    Default


    I tried the following code in IE but it's not working.
    Code:
    Ext.override(Ext.layout.component.Auto, {    beginLayoutCycle: function(ownerContext, firstCycle){
            var me = this,
                lastWidthModel = me.lastWidthModel,
                lastHeightModel = me.lastHeightModel,
                owner = me.owner;
                
            me.callParent(arguments);
                
            if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
                owner.el.setWidth(owner.minWidth || null);
            }
                
            if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
                owner.el.setHeight(owner.minHeight || null);
            }
        }
    });
    
    
    Ext.define( 'MyLongView', {
        extend : 'Ext.Component',
        
        autoScroll : true,
        maxHeight  : 300,
        html       : '1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>',
        hideMode   : 'offsets'
    } );
    
    
    
    
    Ext.create( 'Ext.container.Container', {
        renderTo : 'testDiv',
        hideMode: 'offsets',
            
        layout : {
            type    : 'accordion',
            animate : false,
            multi   : true,
            fill    : false
        },
        
        items : [
            { 
                title: "Panel 1",
                layout: 'fit',
                items : Ext.create( 'MyLongView' ),
                hideMode: 'offsets'
            }
        ]
    } );

  10. #20
    Sencha User
    Join Date
    Apr 2013
    Posts
    1
    Vote Rating
    0
    kubam is on a distinguished road

      0  

    Default


    Are there any chances for fixing this bug in the next patch/minor release?
    It seriously breaks a crucial functionality in our app. None of the workarounds proposed in this thread work in acceptable way...

    Please respond.

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