PDA

View Full Version : [CLOSED]BorderLayout Region Resize Issue



encoder
19 Jul 2010, 12:11 AM
Hi all,

I've searched through the forums and I can't find anything like what I'm about to explain so I thought I'd post my test case.

Scenario

BorderLayout with East, South, Centre regions. Collapsing/Expanding regions resize incorrectly.

HTML



<html lang="en">
<head>
<title>Example Region Bug</title>

<link rel="stylesheet" type="text/css" href="scripts/extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="scripts/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/extjs/ext-all.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</head>
<body>

</body>
</html>


MAIN.JS


// main.js - Created by Bradley J. Gibby q:)
// Version 1.0 - 2010-07-08

Ext.BLANK_IMAGE_URL = "scripts/extjs/resources/images/default/s.gif";

Ext.onReady(function() {
InitViewPort();
});

function InitViewPort() {
new Ext.Viewport({
id: "mainVP"
, layout: "border"
, items: [{
region: "south"
, xtype: "panel"
, html: 'south'
, height: 200
, collapsible: true
, id: 'southPanel'
}, {
region: "west"
, xtype: "panel"
, html: 'west'
, id: 'westPanel'
}, {
region: "east"
, xtype: "panel"
, collapsible: true
, html: 'east'
, width: 200
, id: 'eastPanel'
}, {
region: "center"
, xtype: "panel"
, id: "centrePanel"
, html: 'Centre'
}]
});
}

function InitViewPort2() {
new Ext.Viewport({
id: "mainVP"
, layout: "border"
, items: [{
region: "center"
, xtype: "panel"
, id: "centrePanel"
, html: 'Centre'
}, {
region: "south"
, xtype: "panel"
, html: 'south'
, height: 200
, collapsible: true
, id: 'southPanel'
}, {
region: "east"
, xtype: "panel"
, collapsible: true
, html: 'east'
, width: 200
, id: 'eastPanel'
}, {
region: "west"
, xtype: "panel"
, html: 'west'
, id: 'westPanel'
}]
});
}

function InitViewPort3() {
new Ext.Viewport({
id: "mainVP"
, layout: "border"
, items: [{
region: "south"
, xtype: "panel"
, html: 'south'
, height: 200
, collapsible: true
, id: 'southPanel'
}, {
region: "west"
, xtype: "panel"
, collapsible: true
, width: 200
, html: 'west'
, id: 'westPanel'
}, {
region: "east"
, xtype: "panel"
, html: 'east'
, id: 'eastPanel'
}, {
region: "center"
, xtype: "panel"
, id: "centrePanel"
, html: 'Centre'
}]
});
}


Steps to reproduce bug 1
1. Collapse East
2. Collapse South
3. Click on the collapsed East bar. It should reveal but the height of the panel doesn't resize correctly
4. Click on the << icon in the East bar to lock it into place. It should lock in at the previously incorrect height
5. Click on the << arrow for the South panel to reveal it and lock it into place. This should reduce the size of the East panel further
6. Collapse East
7. Collapse South
8. Reveal East (lock into place)
9. Reveal South (lock into place)

At this point the East region should continue to shrink until there is nothing left bar the title bar.

Steps to reproduce bug 2
1. Collapse East
2. Collapse South
3. Reveal East
4. Exapand South (lock into place)
5. Expand East (lock into place)

At this point the South collapse button should no longer be clickable. The East region should also be reduced in size.

Changing the InitViewPort() call to InitViewPort2() and InitViewPort3() shows different configurations where it happens as well.

Condor
19 Jul 2010, 1:02 AM
Isn't this the same as bug #1064 (http://www.sencha.com/forum/showthread.php?102012-DEFER-1064-Resize-bug-in-Border-layout)?