ExtJS: Ext.Window: hide ou close?
Neste curto tutorial, você vai aprender como controlar o componente Ext.Window Panel do ExtJS.
Problema: você criou uma janela com ExtJS, e ela funcionou perfeitamente na primeira vez. Quando a aplicação disparou o evento para abrir a janela pela segunda vez, nada aconteceu, ou você viu um erro no firebug (algum coisa is not defined ou alguma coisa is null). Como reparar isso?
Solução: quando você não diz como o Ext.Window deve trabalhar, o comportamento padrão é fechar (close) o componente, e com isso, destruí-lo (destroy). Devemos então, esconder (hide) o componente, assim, poderemos reutilizá-lo nas próximas vezes.
Código de Exemplo (referência: http://www.extjs.com/deploy/dev/examples/window/hello.html):
HTML:
[code lang="html" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<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>
[/code]
JS:
[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
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);
});
});
[/code]
Bons códigos!
English Version of this post: Ext.Window Panel: Show or Hide?
Download do projeto: 
http://github.com/loiane/ext-window