ExtJS: Ext.Window: hide ou close?

Posted by Loiane | Posted in Ext JS | Posted on 04-01-2010

2

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

Comments (2)

Ext.Window Panel: Show or Hide? \| Loiane Groner said on 04-01-2010
	[...] ExtJS: Ext.Window: hide ou close? var dzone_style="2";AKPC_IDS += [...]

Tweets that mention ExtJS: Ext.Window: hide ou close? \| Loiane Groner -- Topsy.com said on 04-01-2010
	[...] 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) [...]

Featured Posts