É muito simples criar uma janela, entretanto é possível fazer inúmeras modificaçãos. Desde alterar a aparência, até alterar os recursos e propriedades dela.

Considere para os exemplos abaixo que em nosso arquivo HTML (ASP, PHP, ASPX, etc…) já temos os includes do ExtJS e a função onReady (ambos foram mostrados neste post, clique aqui), ok?

Bom, vamos criar uma janela com minimo possível de propriedades e vejamos o resultado:

Note que após atribuirmos a Window à varável  minha_janela precisamos chamar o metódo show() para que a janela apareça.

Neste momento a janela já possui alguns recursos como: o botão fechar, arrastar a janela e redimencionar seu tamanho.

Podemos inserir muitas outras propriedades na janela (uma lista completa pode ser obtida na documentação do Ext JS) como título, botões, itens e etc…

Vamos adicionar dois botões em nossa janela: “Ok” e “Cancelar”

O texto do botão é adicionado com a propriedade text, caso precise colocar palavras com acentuação no seu botão e ao colocar o caractere acentuado não apareça ou zoe basta utilizar nosso conversor de caracteres para unicode e html, não esqueça de adicionar a página nos seus favoritos para acessar futuramente.

No botão “Cancelar” adicionei uma função para fechar a jenala, usando o metódo close().

No exemplo abaixo vamos adicionar um terceiro botão com a função de mudar o título da jenela. Além disso vamos travar a tela quando janela aparecer, para que o usuário não consiga mexer em nada além da janela atual (modal), vamos travar também a possibilidade de redimensionar a janela (resizable) e travar o recurso de mover a janela (draggable).

O principal que está faltando em nossa janela é o conteúdo que pode ser diversas coisas… pode ser um formulálio ExtJS adicionado pela propriedade items em nossa janela. O conteúdo pode ser um div em nosso HTML, para isso dê um ID para a div e informe esse ID para nossa janela usando a propriedade contentE. Uma terceira terceira maneira de adicionar um conteúdo é pela propriedade html, que obviamente basta inserir o HTML nesta propriedade. A última maneira que citarei aqui é via Ajax, usando a propriedade autoLoad que é capaz de trazer um outro arquivo dentro de nossa window.

Básicamente você precisa apenas informar qual é a url do arquivo que será carregado, porém você também pode passar parâmetros (params) e outras propriedades que podem ser obtidas na documentação clicando aqui.

No script abaixo você pode ver como ficaria nosso autoLoad:

Como sempre, se tiver alguma dúvida do assunto acima basta comentar abaixo.