Panel Resizing

**skirtle** · 25 Oct 2011 12:26 AM

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.

**skirtle** · 25 Dec 2011 12:48 AM

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

**dongryphon** · 28 Dec 2011 11:32 AM

@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', {

        collapsible: true,

        height: 400,

        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', {

        collapsible: true,

        height: 400,

        renderTo: 'inner',

        title: 'Panel',

        width: 200,

        animCollapse: false,

        listeners: {

            resize: function(panel) {

                var el = Ext.get('inner');

                panel.setWidth(el.getWidth() - el.getFrameWidth('lr'));

            }

        }

    });

}



Ext.onReady(doTest);

**dongryphon** · 28 Dec 2011 12:12 PM

This bug can be tracked here:

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

EXTJSIV-4920

**skirtle** · 28 Dec 2011 2:27 PM

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.

**dongryphon** · 29 Dec 2011 1:16 PM

Originally Posted by skirtle

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.

Originally Posted by skirtle

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?

Panel Resizing

Thread Tools

Search Thread

Display

Hybrid View

Panel Resizing

Panel Resizing