[1.1] Two BorderLayout Tab issues [Archive]

seade

7 Aug 2007, 11:10 PM

Ext version: 1.1
Adapter: ext-base.js
OS: Windows XP
Browser: FIrefox 2.0 / IE7

Description of problem:
The attached code presents 3 content panels in the center region. Panels 2 and 3 are disabled immediately after they are created.
Problem 1: Center Panel 3 is not disabled when it should be. It seems that the last tab that is added cannot be disabled.
Problem 2: Closing Center Panel 1 or Center Panel 3 (while Center Panel 2 is disabled) results in strange behaviour. The tab and content of the panel being closed is removed, but the title is not. When none of the panels are disabled the next panel is displayed - this should probably be modified to be the next enabled panel with an exception that no content be displayed if no remaining panels are enabled (title should either be cleared or set to title of remaining disabled panel) - this does actually seem to happen.

Example: Modified from examples/layout/complex.html (put the following in a file at this location for the script references to work)

<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.x-layout-panel-north {
border:0px none;
}
#nav {
}
#center1, #center2, #center3 {
padding:10px;
}
#north {
font:normal 8pt arial, helvetica;
padding:4px;
}
.x-layout-panel-center p {
margin:5px;
}
</style>
<script type="text/javascript">
Example = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Center Panel 1', closable: true}));
// Try swapping the next two lines - you will find that Center Panel 2 cannot be disabled.
layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel 2', closable: false}));
layout.add('center', new Ext.ContentPanel('center3', {title: 'Center Panel 3', closable: true}));
var centerRegion = layout.getRegion('center');
var centerTabs = centerRegion.getTabs();
// It doesn't matter what order the tabs are disabled in, but the last tab cannot be disabled.
centerTabs.disableTab("center3");
// Be sure and try out the behaviour of closing panels 1 and 3 while the following is disabled.
centerTabs.disableTab("center2");
layout.getRegion('center').showPanel('center1');
layout.endUpdate();
}

};

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>
<div id ="container">
<div id="north" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="center2" class="x-layout-inactive-content">
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
</div>
<div id="center3" class="x-layout-inactive-content">
<p>This tab is supposed to be disabled. It is disabled in exactly the same way as Center Panel 2.</p>
<p>But it isn't.</p>
<p>Interestingly, if you have Center Panel 1 displayed and close it, the tab and content disappear, but the heading remains and no other tab is selected. Same goes for Center Panel 3.</p>
</div>
<div id="center1" class="x-layout-inactive-content">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
</div>
</div>
</body>
</html>

Things to try:
Problem 1. Just see that Center Panel 3 is not disabled. Perhaps play around with the order in which the panels are added and disabled.
Problem 2. Try closing the panels with various combinations of enabled and disabled panels.

Thanks for listening.

Scott

seade

12 Aug 2007, 8:19 PM

Problem 1: Center Panel 3 is not disabled when it should be. It seems that the last tab that is added cannot be disabled.
This particular problem is a result of attempting to disable the tab that is currently active (the last one added is always the active one) - the disable methods detect when a tab is the active one and ignore the disable request.

In my case I was shortly after the deactivate request using centerRegion.showPanel() to display one of the enabled tabs. It was pretty easy to switch the code sequence so that the tab being disabled is no longer active before the request to deactivate it is processed.

Ignoring disable requests for the currently active tab seems a little inconsistent - hiding a tab (arguably an even more intrusive operation than disable) does not appear to perform this test. It is also possible to add a further ContentPanel and then hide it - the "Real" last tab is no longer the active one and hence the disable request proceeds (and nicely the next enabled and non-hidden tab is activated). IMO the best way out of the inconsistency would be for the deactivate code to allow the active tab to be disabled - the behaviour when this occurs appears to be acceptable (the behaviour when there is no remaining enabled and non-hidden tab would need to be confirmed).

Scott