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:
<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);
});
});
Bons códigos!
English Version of this post: Ext.Window Panel: Show or Hide?
Download do projeto: 
http://github.com/loiane/ext-window
Posts Similares
Filed Under: Ext JS 3
[...] ExtJS: Ext.Window: hide ou close? var dzone_style="2";AKPC_IDS += [...]
[...] This post was mentioned on Twitter by Loiane Groner, Francisco Souza. Francisco Souza said: RT @loiane: ExtJS: Ext.Window: hide ou close? http://bit.ly/5xur8Q (pt-br) [...]
[...] ExtJS: Ext.Window: hide ou close? [...]
ExtJS: Ext.Window: hide ou close?…
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 co…
Loaine,
Na minha opinião, vejo um problema em usar o closeAction do tipo “hide”, pois no meu caso, utilizo muitos recursos de janelas e conteudos dinâmicos, então usando o hide, ao fechar uma janela, o objeto ainda continua criado no escopo, ocupando cada vez mais memória, impactando assim na performance dos outros componentes.
Neste caso, eu deixei o closeAction como close, porém no handler que abre essa janela, eu chamo uma função, e é nesta função que se encarrega de recriar a janela novamente. Desta forma, “matando” a janela, não compromete as outras janelas.
Mas é claro que isso foi eficaz no meu caso, pois se fosse apenas uma janela, o ideal seria o hide mesmo.