Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

Windows

Uma janela , é um classe filha da classe  “Panel“.

Podemos utilizar em um sistema desktop para exibir as janelas, elas podem ser redimensionadas, ancoradas, modais, maximizadas, minimizadas, resumindo, podemos fazer com que elas tenham o mesmo comportamento em uma aplicação Desktop tradicional.

Primeira janela

Para criar uma janela, utilizamos a seguinte sintaxe:

<ext:Window ID="Window1" runat="server" Title="Ext.NET by Desenvolvedores.net" Width="390"
 Height="290" Layout="FitLayout">
 <Items>
 <ext:Panel ID="Panel1" runat="server" Border="false" />
 </Items>
 </ext:Window>

Este código irá gerar uma janela simples, de tamanho 390×290, como não passamos a posição inicial será exibida no meio da página.

Chamando por botões

No código abaixo iremos chamar a janela por um botão, será criada em tempo de execução.

<ext:Button ID="Button1" runat="server" Text="Exibir Janela">
 <Listeners>
 <Click Handler="#{Window2}.show();" />
 </Listeners>
 </ext:Button>
 <ext:Window ID="Window2" runat="server" AnimateTarget="Button1" CloseAction="Hide"
 Height="200" Hidden="true" Icon="ApplicationCascade" Maximizable="true" Minimizable="true"
 Modal="true" Title="Minha janela modal" Width="300">
 <Listeners>
 <Minimize Handler="this.hide();" />
 </Listeners>
 </ext:Window>

Explicando algumas propriedades

No exemplo acima utilizamos algumas propriedades que valem a pena uma explicação:

• AnimateTarget: É o nome (ID) do controle que vai receber a animação da janela, no caso ela vai sumindo sentido ao controle. É apenas para deixar o visual mais bonito, desta forma a janela não simplesmente “aparece” na tela;
• CloseAction: É a ação que será executada quando a janela for fechada. Os valores possíveis são:
  • Destroy: A janela é destruída e não pode mais se utilizada. Pode ser usado em casos onde a janela deve ser exibida apenas uma vez;
  • Hide: Apenas esconde a janela no navegador. Esta opção permite que a janela possa ser exibida e escondida quantas vezes forem necessárias;
• Minimizable e Maximizable: Cria os dois ícones de maximizar e minimizar a janela, no canto superior direito;
• Modal: Exibe uma janela no topo das outras. A página ficará com um cor esmaecida, e só ficará visível a janela modal. Útil para janelas do tipo diálogo, caixas de mensagens, etc.

Chamando em Postback

Se houver a necessidade de um “postback” para depois abrir a janela, também é possível. Para isso temos  que:

1. Setar a propriedade “AutoPostBack” do botão para “true“;
2. Criar um método no lado servidor, (Code Behind), que irá chamar a sua janela.

Exemplos:

Code design:

<ext:Window ID="Window3" runat="server" CloseAction="Hide" Height="200" Hidden="true"
 Icon="House" Maximizable="true" Minimizable="true" Title="Minha janela postback"
 Width="300">
 </ext:Window>
<ext:Button ID="Button2" runat="server" Text="Exibir Janela com Postback" OnClick="Button2_Click" AutoPostBack="true"></ext:Button>

Code behind

protected void Button2_Click(object sender, EventArgs e)
 {
        this.Window3.Show();
 }

Caso o seu exemplo de PostBack não funcione, verifique se colocou os componentes dentro da tag:

<form runat="server"></form>

Caso contrário não irá funcionar.

Carregar página.

Podemos usar também o componente de janelas para exibir uma página ao ser exibida. Veja exemplo:

<ext:Window ID="Window4" runat="server" CloseAction="Hide" Height="480" Hidden="true"
 Icon="House" Maximizable="true" Minimizable="true" Title="Site: Desenvolvedores.NET"
 Width="640">
 <Loader runat="server" Url="http://desenvolvedores.net" Mode="Frame">
 <LoadMask Msg="Carregando desenvolvedores.net" ShowMask="true">
 </LoadMask>
 </Loader>
 </ext:Window>
 <ext:Button ID="Button3" runat="server" Text="Carregar site">
 <Listeners>
 <Click Handler="#{Window4}.show();" />
 </Listeners>
 </ext:Button>

Explicando algumas propriedades

• Loader: Define o que deverá ser carregado no componente.
  • URL: Define a URL que deverá ser carregada no componente.
  • Mode: Define que será carregado como um frame dentro do componente.
• LoadMask: Define a mensagem que será carregada no componente.
  • ShowMask: Se true a mensagem é exibida, se não, oculta.

---

É isso ai pessoal 🙂
Até o próximo
♦ Marcelo