PDA

View Full Version : Hiding a panel: after hiding, the freed place should be used by other panels



Qtx
17 Sep 2009, 7:42 AM
I could not reach the following effect. I have a window with a range of panels in it. The panels are placed below each other and have the same width. One panel should be sometimes hidden or visible. If the panel becomes hidden, the freed place should not remain empty, but other panels should occupy it. If it becomes visible again, the other panels should be moved down again.

This is the complete example based on the standard example "examples\window\hello.html"

- name the file "hello2.html" and paste the code in it
- place it to the folder "examples\window\"
- Push the button "Show Window", the window appears
- Push the button "Show/Hide User Info" to the the effect of the hiding and showing the panel


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

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

<script language="javascript">
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){

window_body = new Ext.Panel({

border: false,
bodyStyle: 'background-color: transparent',
cls: 'x-border-layout-ct',

items: [
{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
},{
id: 'user_info_panel',
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'user info 1<br>user info 2<br>user info 3<br>user info 4'
},{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
},{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
},{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
},{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
},{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
},{
frame: true,
collapsible: false,
bodyStyle: 'background-color: transparent',
style: 'margin: 5px 5px 5px 5px',
html: 'line 1<br>line 2<br>line 3<br>line 4'
}
]
}); // main_form

user_window = new Ext.Window({

title: '',

width: 500,
height: 500,

closeAction: 'close',
plain: true,
modal: true,

maximizable: false,
minimizable: false,
resizable: false,

layout: 'fit',
items: {
xtype: 'panel',
autoScroll: true,
items: window_body,
border: false,
},

buttons: [
{
text: 'Show/Hide User Info',
handler: function()
{
// show info panel
var inf_pnl = Ext.get('user_info_panel');
if(inf_pnl)
{
//inf_pnl.hidden = false;
inf_pnl.setVisible(!inf_pnl.isVisible());

inf_pnl.doLayout(false, true);
main_form.doLayout(false, true);

inf_pnl.syncSize();
main_form.syncSize();
}
}
}
],
});

user_window.show();

});
});
</script>
</head>
<body>

<input type="button" id="show-btn" value="Show Window" />
</body>
</html>

Animal
17 Sep 2009, 9:46 AM
Card layout.

Qtx
17 Sep 2009, 10:42 AM
Well, the card layout (tabs or wizzard) is not that what I need. I need something like accordation layout, but in my case many or all panels are visible. And if one panel is being hidden, others should occupy the freed place/ If it is shown again, other panels should be moved down.

Animal
17 Sep 2009, 10:46 AM
So you just need collapsible Panels then.

Qtx
17 Sep 2009, 11:16 AM
Great! It is really simple. My panels do not have headers and I stack at using setVisible(false/true).

Thanks!