PDA

View Full Version : [CLOSED-416][3.??] border layout in grouptabpanel



plaak
5 Jan 2010, 9:10 AM
I seem to have found a bug in the interaction between the grouptabpanel UX and the border layout that causes the border regions except for the center to shrink to zero or collapse even if on regions that are NOT collapsible and shrinks to less than minWidth.

Step:
1) Render/activate tab with border layout
2) Navigate to a different tab.
3) Resize Browser
4) Re-activate the prior tab.

If the slider is enabled for the region I'm able to drag it back open.

I am using ExtJS 3.1 and I'm quite sure I saw this problem before. This same problem occurs in several separate tabs since I'm using this pattern repeatedly throughout my application.

Any workarounds or fixes?

jsakalos
6 Jan 2010, 5:24 AM
If it is a bug in UX, post it please in the original UX thread. User Extensions are not supported on this forum.

plaak
6 Jan 2010, 11:22 AM
Saki,

First, I want to say that I very much appreciate the examples and tutorials on your website. I've found them very helpful in learning ExtJS.

That said, as I suspected, I was able to reproduce this problem with an ordinary tab panel (and maybe other components as well?). e.g., viewPort -> tab panel -> border layout. I haven't dug into the ExtJS code that thoroughly but my guess is this has something to do with the fact that the rendered border layout is getting resized while it's invisible (and working with the wrong dimensions or something).

Here is a working (?) example:



<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 -->
<link rel="stylesheet" type="text/css" href="../examples/ux/css/GroupTab.css" />

<!-- ** 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 -->
<!-- <script type="text/javascript" src="../examples/ux/GroupTab.js"></script>
<script type="text/javascript" src="../examples/ux/GroupTabPanel.js"></script> -->

<!-- extensions -->

<!-- page specific -->

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

Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout:'fit',
items:{

xtype: 'tabpanel',
items: [{
title: 'Panel A', // <-- CLICK here first, i.e., force it to render
//xtype: 'panel',
layout: 'border',
items: [{
title: 'Top',
region: 'north',
height: 400,
html: 'NOTICE: YOU CAN SEE ME BEFORE YOU ACTIVATE OTHER TAB AND RESIZE BROWSER WINDOW...'
},{
title: 'Center',
region: 'center',
height: 400,
html: 'Content in Center Region'
}]
}, {
title: 'Panel B', // <--- Then click here, resize browser, and click tab for "Panel A".... observe north panel's height is zero (sort of collapsed)
html: 'I am tab B'
}]

}
});
});


</script>

</head>
<body>
</body>
</html>
Instructions:

Step 1: Click "Panel A" (e.g., force it to render).
Step 2: Click "Panel B" (e.g.,hide Panel A/border layout).
Step 3: Re-size Browser Window
Step 4: Click back on "Panel A"

Observe that the North panel's content's height is 0 or that it's essentially "collapsed".

Since the split option isn't enabled here, you can't drag it back to normal height.

If it were enabled, you could... it's just non-obvious to the user. Also, if "collapsible" is enabled... toggling it afterwards doesn't help either.

Thanks for the assistance,
Pete

plaak
6 Jan 2010, 4:12 PM
After speaking with hendricd, I've tried:

- Setting the "center" region w/o a height.

- Setting DeferredRender = false

- ActiveTab: 0

I'm still able to reproduce this in virtually every browser I am able to get my hands on e.g., FF3 mac/windows, chrome mac/windows, safari mac, etc. However, it does work properly in IE6 for some reason...at least with the above options.

jsakalos
7 Jan 2010, 3:01 AM
It is Ext 3.1 bug. I works flawlessly in Ext 3.0. Moving this thread to Bugs.

Animal
7 Jan 2010, 3:11 AM
That's strange. The hidden Panel should not attempt to lay itself out upon resize of its Container (the TabPanel) because being hidden, it's canLayout method should have returned false, so the relaying of the border regions should have been deferred until the next show.

jsakalos
7 Jan 2010, 3:16 AM
Yes, but TabPanel has monitorResize:true that can have some influence. I haven't studied/tested that though.

Animal
7 Jan 2010, 3:47 AM
It should definitely not have monitorResize as true.

Re-laying out of a layout should only happen when the Container requests it.

Only the outermost Container needs to respond to a browser resize.

jsakalos
7 Jan 2010, 4:41 AM
monitorResize is true by default for TabPanel. If I add monitorResize:false in the OP's showcase, it fixes the problem. Anyway, I think this should be fixed within Ext with no userspace intervention/settings needed.

Animal
7 Jan 2010, 4:50 AM
Yes. It should be removed in the base class. It was another sticking plaster just like the layoutOnTabChange config. That should not be necessary, and should not exist. I think Jamie's new layout engine will fix a lot of these things.

plaak
7 Jan 2010, 7:52 AM
After reading Saki's suggested work-around for the standard tabpanel, I set the config option for monitorResize = false in the groupTabPanel. It appears to be an acceptable workaround with no adverse consequences as far as I can see thus far in FF3/Mac. Will test later on other browsers.

Thanks
Pete

Rowan
12 Jan 2010, 8:03 AM
This bug still exists if you have a tab panel inside of a border layout with one of the tabs having a border layout


I have something akin to the following




viewport = new Ext.viewport({
new Ext.TreePanel(
{
region : 'west',
collapsible : true
}
),
new Ext.TabPanel({
region:'center',
id :'centre',
ctCls : 'centerTabs',
resizeTabs:true,
minTabWidth : 150,
deferredRender:false,
activeTab:0,
monitorResize : false,
items : [
{
XXXXX
},
{
layout:border,
items : [
{
region : 'center'
},
{
region : 'east'
}
]
}
]
}
});



Basically if you switch tabs then close the west panel on the viewport then swap back, the nested border layout completely messes up and the center panel takes over the whole screen, there's no way to get it back without dragging the nested border layout around.

I cant see where the issue is really, the code worked fine in Ext 1 / 2 but the layouts in 3 seem like they are completely going mad.

I've tried everything I can to get it working correctly but no matter what I try to call doLayout on in order to resize them back to how they should be I get the same results. It's causing massive problems here as we cannot release the app now after catching this. It's quite a strange bug to see in our system too, but once it happens you have to restart the app or start messing about with column sizes etc.

The window resize fix from this post doesn't fix it.

Please help...

Rowan

Rowan
13 Jan 2010, 9:19 AM
viewport = new Ext.Viewport({
layout:'border',
items:[
{ // raw
itemId:'north-panel',
region:'north',
split:false,
collapsible: false,
tbar : [
{
id : 'creditWindow',
text: '<b>Button</b>',
disabled : false,
handler: function() {

}
}
]
},
{
itemId : 'west',
region:'west',
title:'Channels',
split:true,
width: 235,
minSize: 235,
maxSize: 500,
collapsible: true,
margins:'0 0 0 3',
rootVisible:true,
lines:false,
autoScroll:true,
animCollapse : false
},
{
itemId : 'east',
region:'east',
title:'east',
split:true,
width: 235,
minSize: 235,
maxSize: 500,
collapsible: true,
margins:'0 0 0 3',
rootVisible:true,
lines:false,
autoScroll:true,
animCollapse : false
},
new Ext.TabPanel({
region:'center',
itemId :'centre',
ctCls : 'centerTabs',
resizeTabs:true,
minTabWidth : 150,
deferredRender:false,
activeTab:0,
monitorResize : false,
items:[
{
itemId:'Panel2',
title: 'normal panel',
autoScroll:true,
containerScroll : true,
border:false
}
]
})
]
});

var w = viewport.getComponent('west');
var c = viewport.getComponent('centre');





var panel = new Ext.Panel({
itemId:'Panel1',
title: 'Border Panel',
header : false,
border : false,
fitToFrame:true,
closable:true,
autoScroll:true,
autoDestroy : false,
layout: 'border',
items : [
{
labelWidth: 120, // label settings here cascade unless overridden
labelAlign : 'top',
header : false,
region : 'east',
width:382,
cls : 'formHolder',
autoShow : true,
collapsible : true,
collapseMode:'mini',
frame: true,
resizeable: false,
title: 'Article edit',
bodyStyle:'padding:0 5px',
split:true,
autoScroll : true
},
{
header : false,
border : false,
fitToFrame:true,
autoScroll:true,
autoDestroy : true,
region: 'center'
},
]
});



c.add(panel);

var p = c.getComponent('Panel1');
var q = c.getComponent('Panel2');



console.log(c,p);


p.on('activate',function(){
w.collapse();
});

q.on('activate',function(){
w.expand();
});








To Test ::::

Open up tab to see the border layout.
Open normal tab
Close west panel
Open border tab
Minimise the east panel inside the border


The layout messes up, this gets more messed up the more nested panels you have and the more content you have inside the center panel of the border layout.

Nested border panels worked so well in 2 but in 3 they are a right pain. Any help would be greatly appreciated guys.

Thanks

Rowan

Jamie Avins
13 Jan 2010, 10:09 AM
Your borderLayout is being put inside of an autoScroll container. You should not be doing that as the border sizing is going to account for scrollbars that will never exist. From our end we need to document this better and check for this explicitly (this will be in 3.1.1) as we see this type of issue quite often. Box and Border layouts never be put inside a overflowed containers as their measurements will be incorrect. You can do this with a column container, but it will not handled properly in versions below 3.1.1.

Rowan
15 Jan 2010, 2:52 AM
Hi Jamie, thanks, that fixed one issue but for some reason the border layout in our app was resizing the center panel to the whole width of the tab container when switching to it, I managed to sort of hack around it by using the following





//reference to the item in TabPanel
this.tabPaneItem.on('activate', function(){

//reference to the west panel of the nested borderlayout
this.westPanel.setWidth(382);

//reference to the border layout panel
this.panel.doLayout();

}, this);


If you use doLayout without setting the width nothing happens, same with the setWidth without the doLayout.

Was a very strange bug, column layouts are a pain to use in this situation as they dont really behave the same as border and this app has been working on a live system with this layout in Ext2 for well over a year.

Hope this helps someone else!

Rowan

Jamie Avins
15 Jan 2010, 10:25 AM
Work was done to clean this up in 3.1.1, specific fixes were made to column and row layout which have never worked properly in IE. The beta will be released today, let me know how it handles this as it seemed to work correctly in the example you posted.