Panel Resizing

1 Attachment(s)

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.

Attachment 28861

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.

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

@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);

This bug can be tracked here:

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

EXTJSIV-4920

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.

Quote:

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.

Quote:

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?

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.

2 Attachment(s)

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.)

Attachment 30389

Attachment 30390

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' } ] }] }); });

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