PDA

View Full Version : 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.

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.


#main {
border: 1px solid red;
height: 300px;
overflow-y: auto;
width: 300px;
}

#inner {
border: 1px solid green;
}


<body>
<div id="main"><div id="inner"></div></div>
</body>


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



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



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 (http://skirtlesden.com/ux/component-column)) 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
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.


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 (http://skirtlesden.com/ux/component-column)) 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?

skirtle
29 Dec 2011, 1:57 PM
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.

scancubus
30 Dec 2011, 7:52 PM
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.)

30389

30390



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

Animal
31 Dec 2011, 1:40 AM
What happens if you configure that center region to be layout: 'anchor' so that the anchor: '100%' default has an effect?