Continuando nossa série de artigos sobre o ExtJs, vamos falar hoje sobre as Janelas (Ext.Window).
Elas servem para bastante coisa.
Sabe quando foi necessário abrir aquela nova janela do browser pq o cliente pediu ? Ou quando você simplesmente queria que sua aplicação não fizesse um reload toda a vez ? Ou então para organizar melhor sua aplicação ? Pois é… as janelas do Ext funcionam para isto tudo. São simples !

O método “show” serve para mostrar, o método “hide” para esconder e o método “close” para destruir a janela.

Você pode definir o tamanho e também a ação default quando o usuário clicar no botão de fechar.
Você pode definir se ela pode ser fechada, se ele pode ser maximizada e se ela pode ser minimizada, com o detalhe que o botão minimizar não é padrão, obrigando você a desenvolver o método para que ele funcione exatamente do jeito que você quer.

Você pode também definir se ele será redimensionável e móvel, será terá botões de ação, se terá toolbar superior e/ou inferior, o layout e todo o conteúdo dela funcionam exatamente como qualquer outro item do Ext.

Vamos ao exemplo.

Vou criar aqui uma janelinha de login, com algumas opções diferentes para poder exemplificar tudo isto, ok !

Ext.onReady(function(){
	var win = new Ext.Window({
		title: 'Janela de Login de Exemplo - ExtJs',
		layout:'form',
		width: 300,
		height: 180,
		closeAction:'close',			//Indica o que será feito quando clicar no icone de fechar da janela
										//pode ser 'close' ou 'hide'
		resizable: false,				//'true' para ser redimensionável
		maximizable: true,				//'true' para ser maximizável

		bodyStyle: "padding: 8px;",		//css que serão aplicadas no corpo da janela

		items: [{
			xtype: 'textfield',
			fieldLabel: 'Usuário',
			anchor: '95%'
		},{
			xtype: 'textfield',
			fieldLabel: 'Senha',
			inputType: 'password',
			anchor: '95%'
		}],

		//Tooblar Superior
		tbar:[{
			text:"Novo",
			handler: function(){
				Ext.Msg.alert('Ext.Window', 'Não implementado');
			}
		},'-',{
			text:"Esqueci a Senha",
			handler: function(){
				Ext.Msg.alert('Ext.Window', 'Não implementado');
			}
		}],

		//Tooblar Inferior
		bbar: [{
			xtype: 'tbtext',
			text: 'Aqui pode ir um texto de status da janela...'
		}],

		//Botões da Janela
		buttons: [{
			text:'Efetuar Login',
			handler: function(){
				Ext.Msg.alert('Ext.Window', 'Login efetuado com sucesso!');
				win.close();
			}
		}]
	});
	win.show(this);
});

As opções da Ext.Window você pode consultar aqui -> http://www.extjs.com/deploy/dev/docs/?class=Ext.Window

Ela vai ficar assim:

Janela de login criada em ExtJS

Bom, é simples utilizar as janelas do Ext, para vários fins, e como sempre, o ext é simples de se criar componentes, e rapidamente você tem uma janela rodando.

Agora, tente trocar os itens dentro da janela, adicionar e remover alguns botões, trabalhar com o texto da toolbar inferior para ver o que se pode fazer.

Ah, com relação ao minimizar: eu geralmente não utilizo nem o maximizar, quanto menos o minimizar nas minhas aplicações, isto pq teria mais sentido em um desktop por exemplo, mas fica a seu critério utilizá-los ou não.

Outro detalhe, padronize sempre seus JSs, isto faz com que você não se perca na hora de dar manutenção no código, utilizo sempre este formato de identação e comentários nos meus códigos, pois acho bastante legível, e também, tem algumas propriedades do ext ( como por exemplo “items” ) que não obrigam ser um array na sua definição, porém, como padronização eu SEMPRE utilizo um array. Este tipo de atitude sempre me facilita não dando alguns bguzinhos escondidos… hehehe