PDA

View Full Version : [SOLVED]3.1.1 vbox layout resizing issue



axpa
24 Feb 2010, 1:14 AM
NOW WORKING!
Remeber to stretch! :D

Ext version tested:


Ext 3.1.1



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


IE8
FF3.0.18 (firebug 1.4.5 installed)
Safari 4.0.3



Operating System:


WinXP Pro



Description:


Doing a window resize or resizing/collapsing west region in viewport results in that the vbox panel in center dont resize correctly leaving space blank and removing collapse tool.



Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [ {
region: 'west',
collapsible: true,
title: 'Navigation',
split: true,
width: 200,
html:'test west'

}, {
region: 'south',
title: 'Title for Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'center',
xtype: 'panel', // TabPanel itself has no title
layout:'vbox',
layoutConfig: {
align:'stretch'
},
id:'resizeme',
tbar:[{text:'doLayout on center region',handler:function(){Ext.getCmp('resizeme').doLayout();}}],
items: [{
title: 'Panel 1',
xtype: 'panel',
layout:'fit',
flex:1,
html: 'The first content. '
},{
title: 'Panel 2',
xtype: 'panel',
layout:'fit',
collapsible:true,
flex:3,
html: 'The second content.'
}]
}]
});

}); //end onReady
</script>

</head>
<body>
</body>
</html>
See this URL : http://212.247.89.25/extdebug/ext-3.1.1/ext-3.1.1/examples/debug/debug-align-stretch.html

Steps to reproduce the problem:


Load page in a browserwindow that is less then fullscreen, rostore window to full screen, vbox items doesnt resize automatically, fix by using button in tbar
Load page and collapse westpanel or make west panel smaller



The result that was expected:


That the vbox items should resize automatically as they do when expanding west region



The result that occurs instead:


The vbox / center panels get cut of and leaving a blank space



Screenshot or Video:


attached



Debugging already done:


Tested doLayout manually using the button in tbar



Possible fix:


See Animals hint in #8 regarding border layout

Animal
24 Feb 2010, 1:23 AM
You are not asking for the boxes to have their width managed. What's it supposed to do, read your mind?

axpa
24 Feb 2010, 1:51 AM
Hi Animal,
Thank you for your reply.
Setting the viewport to monitorResize:true takes cares of the window resizing
but not of the west collapse issue.

Of course I can set a listener and trigger a doLayout on the center region. Just thought that it should be done automatically. I've also tried setting autoWidth:true but that doesnt work either. Do you perhaps some mindreading tricks?
Cheers
Axpa

Animal
24 Feb 2010, 1:53 AM
Viewport already monitors browser resize, and lays itself out on resize events.

http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout

axpa
24 Feb 2010, 2:37 AM
Hi Animal,
Thanks again for your feedback.
I've found a server that I could post some tests on.

The first as supplied in this first entry.
http://212.247.89.25/extdebug/ext-3.1.1/ext-3.1.1/examples/debug/debug.html

Adding a monitorResize:true on viewport (yes I know it should do it from the getgo, but do you see the difference?)
http://212.247.89.25/extdebug/ext-3.1.1/ext-3.1.1/examples/debug/debug-vp-monitorresize.html

After a rtfm again from your supplied link I see the align:'stretch' as a good candidate.
Heres first my original code with align:'stretch' on vbox panel.
http://212.247.89.25/extdebug/ext-3.1.1/ext-3.1.1/examples/debug/debug-align-stretch.html
That doesnt work when collapsing the west region, problem persist.

Combining align:'stretch' and viewport monitorResize:true
http://212.247.89.25/extdebug/ext-3.1.1/ext-3.1.1/examples/debug/debug-align-stretch-vp-monitor.html

Now you can resize window and it resizes the vbox items. But collapse/expand west still is a no go, still needs a doLayout.

Any more mindreading tricks up your sleave?
Cheers
Axpa

Animal
24 Feb 2010, 3:02 AM
Right. Your code in http://212.247.89.25/extdebug/ext-3.1.1/ext-3.1.1/examples/debug/debug-align-stretch.html is correct. It uses align: 'stretch' to request that they are fitted widthwise.

It should not need to perform an explicit doLayout on the center region for it to lay out properly. This is a bug.

Animal
24 Feb 2010, 3:04 AM
Do you want to change post 1 to illustrate the correctly configured Viewport not working and have me move this thread back into the Bugs folder, or repost a new thread?

Animal
24 Feb 2010, 3:06 AM
In fact it is a bug in border layout.

Expanding/Collapsing has been changed to doLayout on the collapsed Panel instead of going one generation up, and calling doLayout on that. I remember seeing that change go in and thinking it was dodgy, but assuming that it must be for a reason...

axpa
24 Feb 2010, 3:07 AM
Hi Animal,
Thanks for a great help, I'll edit the first to reflect correct code then you can change it into a bug report in bug thread.
Cheers
Jimmy

axpa
24 Feb 2010, 3:11 AM
Hi Animal,
Please move it back to bugs.
Best regards
Axpa

Animal
24 Feb 2010, 3:13 AM
align: 'stretch' is a config of the layout, not the Container. Try it again.

Animal
24 Feb 2010, 3:15 AM
I just bodged your running example in Firebug to configure it correctly and it all works. No bug there.

axpa
24 Feb 2010, 3:26 AM
Hi Animal,
I bow my head!
Adding
layoutConfig: {
align:'stretch',
}
is the charm.
And you were great in helping out as is your trademark!
Cheers
Axpa

axpa
24 Feb 2010, 3:31 AM
Hi,
Could you add solved to the title or how do I do that?
Cheers
Axpa