PDA

View Full Version : Removing the splitter when a panel collapses



LisburnLad
2 Sep 2012, 2:07 PM
I have 2 panels and a button in a toolbar to collapse or expand the top panel.

38414

In version 4.1.0 when the button was clicked to collapse the panel, the top panel would dissapear and the bottom panel would occupy the complete area:

38415

Now however, in version 4.1.1, when the collapse button is clicked the top panel's splitter appears and so the bottom panel no longer occupies the full area:

38416

A demonstration of this can be seen in the following fiddle - change the framework between 4.10 and 4.1.1 to see the difference: EXAMPLE_FIDDLE (http://jsfiddle.net/LisburnLad/C3vKv/2/)

Would anyone know how to stop the splitter appearing when the panel is collapsed?

Thanks for any help,

Steve

My test code is as shown below.



<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Lib/ExtJS/resources/css/ext-all.css"/>
<style type="text/css">
#TopPanel-splitter { background-color: #FF0000; }
</style>
<script type="text/javascript" src="Lib/ExtJS/ext-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function ()
{
var borderPanel = Ext.create('Ext.panel.Panel',
{
layout: { type: 'border' },
defaults: { border: false },
items:
[{
region: 'north',
id: 'TopPanel',
html: 'top bit',
minHeight: 150,
layout: 'fit',
collapseMode: 'mini',
bodyStyle: 'background:#0ff;'
},
{
region: 'center',
html: 'bottom bit',
layout: 'fit',
flex: 1,
bodyStyle: 'background:#ff0;'
}]
});

var viewport = Ext.create('Ext.Viewport',
{
layout: { type: 'border' },
items:
[{
region: 'center',
items: borderPanel,
layout: 'fit',
dockedItems: [
{
xtype: 'toolbar',
id: 'ItemToolbar',
height: 27,
items: [
{ xtype: 'tbspacer', flex: 1 },
{
xtype: 'button',
id: 'CollapseDetailsButton',
text: 'Collapse',
handler: function (button)
{
var panel = Ext.getCmp('TopPanel');
panel.toggleCollapse();
button.setText(panel.getCollapsed() ? 'Expand' : 'Collapse');
}
}]
}]
}],
renderTo: Ext.getBody()
});
});
</script>
</head><body></body></html>

LisburnLad
6 Sep 2012, 12:47 PM
It appears that being able to collapse a panel to nothing, when its collapse mode was set to 'mini', was actually a bug in 4.1.0 that has now been fixed (see the following:
http://www.sencha.com/forum/showthread.php?241074-Splitter-bar-appears-when-panel-is-collapsed&p=883107#post883107 (http://www.sencha.com/forum/showthread.php?241074-Splitter-bar-appears-when-panel-is-collapsed&p=883107#post883107) )

Therefore its not actually possible to collapse a panel entirely and therefore I've used show and hide instead.