Ext.Window Panel: Show or Hide?
From this short tutorial you will learn how to control the Ext.Window panel. It explains how to hide or show it on button click.
Problem: you created a Ext.Window, clicked on a button or link (or something else) and a window showed up. You clicked on close button (up right corner) and it closed. You tried again, but the window did not show from second time (and on) – maybe you got an error message in Firebug console.
Solution: the default behaviour of this componet is to close. But close means destroy the component, so the second time you tried to open it, it did not work. The solution is to hide the window, so you can reuse it when you need it again.
Let’s see some code (Reference: Hello Word Window)
HTML:
<html>
<head>
<title>Ext.Window: close or hide</title>
<link rel="stylesheet" type="text/css" href="/ext-window/ext-3.0.3/resources/css/ext-all.css" />
<script src="/ext-window/ext-3.0.3/adapter/ext/ext-base.js"></script>
<script src="/ext-window/ext-3.0.3/ext-all.js"></script>
<script src="/ext-window/js/ext-window.js"></script>
</head>
<body>
<input type="button" id="show-btn" value="Show Window" />
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World">
<p>Ext.Window Panel: Close or Hide?</p>
</div>
</div>
</div>
</body>
</html>
JS:
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/ext-window/ext-3.0.3/resources/images/default/s.gif';
var win;
var button = Ext.get('show-btn');
var tab = new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
});
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
//cria a janela no primeiro clique e a reusa nos próximos cliques
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide', //'close' - destroy the component
plain: true,
items: tab,
buttons: [{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
Happy Coding!
Download (J2EE project): 
http://github.com/loiane/ext-window
Portuguese: ExtJS: Ext.Window: hide ou close?
Comments (4)
Links to this Post
- ExtJS: Ext.Window: hide ou close? | Loiane Groner | January 4, 2010
- JavaPins | January 8, 2012
What if you want to dynamically create a new one everytime the button is clicked?
That is what I need.
Thanks in advance,
Fred
@frederick:
You can do it. There is no problem in it.
Inside the button handler function you can put:
var win = new Ext.Window({config});