1. #1
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default Panel Resizing

    Panel Resizing


    I'm getting a strange issue with a panel when I resize it. It's getting clipped by a scrollbar's width such that the collapse tool is partially hidden.

    panel.png

    My test case may seem a little perverse but it was the simplest way I could find to demonstrate the clipping effect. It works fine against 4.0.x. Note that even though sizes are specified in the CSS this is not a case of auto-sizing.

    Code:
    #main {
        border: 1px solid red;
        height: 300px;
        overflow-y: auto;
        width: 300px;
    }
    
    #inner {
        border: 1px solid green;
    }
    HTML Code:
    <body>
        <div id="main"><div id="inner"></div></div>
    </body>
    Code:
    Ext.create('Ext.panel.Panel', {
        collapsible: true,
        height: 400,
        renderTo: 'inner',
        title: 'Panel',
        width: 200,
        listeners: {
            resize: function(panel) {
                var el = Ext.get('inner');
    
                panel.setWidth(el.getWidth() - el.getFrameWidth('lr'));
            }
        }
    });
    To see the problem just collapse the panel.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I'm still seeing this problem using 4.1.0-beta-1.

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,294
    Vote Rating
    121
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    @skirtle,

    After a bit of digging, the issue lies in how you are using the resize handler to resize the panel combined with the panel collapse animation.

    I will create a ticket on animations vs resize handlers since this "should work" of course.

    If all you are doing is a manual auto width, you can remove the width and resize handler. This would not have worked in PR1, but does in Beta 1.

    Workaround #1 - use auto width

    PHP Code:
    function doTest () {
        
    Ext.DomHelper.append(document.body, {
                
    tag'div',
                
    style: {
                    
    border'1px solid red',
                    
    height'300px',
                    
    overflowY'auto',
                    
    width'300px'
                
    },
                
    cn: [{
                    
    id"inner",
                    
    style'border: 1px solid green'
                
    }]
            });

        
    Ext.create('Ext.panel.Panel', {
            
    collapsibletrue,
            
    height400,
            
    renderTo'inner',
            
    title'Panel'
        
    });
    }

    Ext.onReady(doTest); 
    If the plot thickens and auto width is not what you are really after...

    Work around #2 - turn off animCollapse

    PHP Code:
    function doTest () {
        
    Ext.DomHelper.append(document.body, {
                
    tag'div',
                
    style: {
                    
    border'1px solid red',
                    
    height'300px',
                    
    overflowY'auto',
                    
    width'300px'
                
    },
                
    cn: [{
                    
    id"inner",
                    
    style'border: 1px solid green'
                
    }]
            });

        
    Ext.create('Ext.panel.Panel', {
            
    collapsibletrue,
            
    height400,
            
    renderTo'inner',
            
    title'Panel',
            
    width200,
            
    animCollapsefalse,
            
    listeners: {
                
    resize: function(panel) {
                    var 
    el Ext.get('inner');
                    
    panel.setWidth(el.getWidth() - el.getFrameWidth('lr'));
                }
            }
        });
    }

    Ext.onReady(doTest); 
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,294
    Vote Rating
    121
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    This bug can be tracked here:

    http://www.sencha.com/forum/showthread.php?167753

    EXTJSIV-4920
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Thanks for the feedback.

    I had a play with the auto-sizing example you gave but it doesn't work the way I'd like. Collapsing works fine but expanding doesn't, you end up with scrollbars both horizontally and vertically.

    Turning off animations does fix it but that obviously isn't ideal.

    To give you some background to this. The problem isn't in my application as such. I've published a UX called Component Column (demos here) that allows components to be injected into grid cells. For that I need to manage their width to ensure they fit the column. A panel collapse in a cell can cause the vertical scrollbar on the grid to disappear, which kicks off a column resize. It's the column resize that kicks off my resize logic, I'm largely oblivious to the fact that there's a collapse animation going on.

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,294
    Vote Rating
    121
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by skirtle View Post
    Thanks for the feedback.

    I had a play with the auto-sizing example you gave but it doesn't work the way I'd like. Collapsing works fine but expanding doesn't, you end up with scrollbars both horizontally and vertically.
    I think I have a fix for this. Again, animations were involved. The layout system "restored" the width before the layout in order to animate to the new size, but that ended up stamping a width style on the el... a bad thing for auto sizing.

    Quote Originally Posted by skirtle View Post
    To give you some background to this. The problem isn't in my application as such. I've published a UX called Component Column (demos here) that allows components to be injected into grid cells. For that I need to manage their width to ensure they fit the column. A panel collapse in a cell can cause the vertical scrollbar on the grid to disappear, which kicks off a column resize. It's the column resize that kicks off my resize logic, I'm largely oblivious to the fact that there's a collapse animation going on.
    Yeah, I figured the real world use case was not as straight as the example.

    Is the event you listen to column resize, not panel resize?
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  7. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Yes, in reality I'm listening to a column resize event. The test case I posted cuts out quite a few steps in the chain but the end result is the same.

    I'm hopeful that auto-sizing might be the ultimate solution to my problems but it's a little difficult to judge at this stage while you're still ironing out the kinks in the beta.

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    69
    Vote Rating
    0
    scancubus is on a distinguished road

      0  

    Default


    Not sure if this is part of the same bug, but take the following example. It has a couple panels in the center region. As soon as you collapse enough of them to get rid of the scroller, they expand in width. Then when you expand the panels again, there is now a horizontal scroller. It is cutting off the collapse tool(which is also broken in my companies app now, Ill leave that for later.)

    border1.jpg

    border2.jpg


    Code:
    Ext.require(['*']);
    Ext.onReady(function() {
        var viewport = Ext.create('Ext.Viewport', {
            layout: {
                type: 'border',
                padding: 5
            },
            defaults: {
                split: true
            },
            items: [{
                region: 'north',
                collapsible: true,
                title: 'North',
                split: true,
                height: 100,
                minHeight: 60,
                html: 'north'
            },{
                region: 'west',
                collapsible: true,
                title: 'Starts at width 30%',
                split: true,
                width: '30%',
                minWidth: 100,
                minHeight: 140,
                html: 'west<br>I am floatable'
            },{
                region: 'center',
    			autoScroll:true,
                html: 'center center',
                title: 'Center',
                minHeight: 80,
    			defaults:{
    				xtype:'panel',
    				anchor:'100%',
    				height:300,
    				collapsible:true
    			},
    			items:[
    				{
    					html:'panel 1'
    				},{
    					xtype:'panel'
    				},{
    					xtype:'panel'
    				},{
    					xtype:'panel'
    				}
    			]
    		}]
    	});
    });

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

      0  

    Default


    What happens if you configure that center region to be layout: 'anchor' so that the anchor: '100%' default has an effect?