Neste artigo iremos aprender um pouco mais sobre os princípios básicos do EXT.

Como vocês já sabem, o EXT é um conjunto de bibliotecas em JavaScript, com o principal objetivo de desenvolver um sistema. É claro que podemos utilizar o EXT apenas para uma pequena tarefa, como exibir mensagens personalizadas, mas devemos entender que o EXT possui uma arquitetura extensa (para não dizer “pesada”) e usar toda esta arquitetura de forma correta é, sem dúvida, a melhor forma de utilizar EXT.

Os princípios exibidos aqui irão tornar a sua jornada mais fácil, além de mais precisa. Então vamos a eles:

1) Tudo em um arquivo index.html

Toda a sua aplicação EXT deve estar em um arquivo único. Ou seja, se você for desenvolver uma aplicação EXT, não seria necessário ter vários arquivos (index.html, cadastroCliente.html, relatorio.html). Isso otimiza o carregamento da biblioteca EXT, que possui em média 500 KB.

Nos nossos exemplos, iremos criar arquivos separados, mas quando formos criar um sistema completo, iremos utilizar este conceito. Iremos comentar melhor essa técnica em um próximo artigo .

2)Técnica EXT parametrizada

Nome esquisito só para chamar a atenção de todos! O Ext criou uma metodologia eficiente de passagem de parâmetros , no qual é passado um objeto no formato JSON. Veja o exemplo a seguir:

 win = new Ext.Window({
                el:´hello-win´,
                layout:´fit´,
                width:500,
                height:300,
                closeAction:´hide´,
                plain: true,
                
                items: new Ext.TabPanel({
                    el: ´hello-tabs´,
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                }),

                buttons: [{
                    text:´Submit´,
                    disabled:true
                },{
                    text: ´Close´,
                    handler: function(){
                        win.hide();
                    }
                }]
            });

No exemplo anterior, tudo que está em azul é um único parâmetro de configuração para a criação de uma janela, que será instanciada através da variável “win”. Agora a técnica que será utilizada ao longo dos nossos artigos será essa:

• Sempre que criar um componente, definir o parâmetro “id”.
• Para cada parâmetro, inserir a vírgula antes de tudo.

Vamos ao exemplo:

Antes:

Ext.MessageBox.show({
           title: ´Address´,
           msg: ´Please enter your address:´,
           width:300,
           buttons: Ext.MessageBox.OKCANCEL,
           multiline: true,
           fn: showResultText,
           animEl: ´mb3´
       });

Utilizando a técnica:

Ext.MessageBox.show({
	   Id: ´msgBox´
           , title: ´Address´
           , msg: ´Please enter your address:´
           , width:300
           , buttons: Ext.MessageBox.OKCANCEL
           , multiline: true
           , fn: showResultText
           , animEl: ´mb3´
       });

Esta técnica é utilizada para que se possa ter controle das vírgulas sobre cada parâmetro. Por exemplo, se retirarmos o parâmetro “animEl” no exemplo acima, poderemos ter a seguinte situação:

…. código

multiline: true,
 	fn: showResultText,
         
   });

Ou seja, temos uma vírgula após o “showResultText” e o término do objeto com as chaves, provocando um erro de sintaxe. Com a vírgula antes de cada parâmetro, não temos este problema.

3) Usando Ext.onReady()

Este método especial é utilizado para que possamos iniciar todo o processo de inicialização do nosso script. Devemos utilizar as bibliotecas do EXT somente quando tudo está inicializado e o método onReady nos fornece isso.

Ext.onReady(function(){
    Ext.get(´mb1´).on(´click´, function(e){
        Ext.MessageBox.confirm(´Confirm´, ´Are you sure you want to do that?´, showResult);
    });
});

4) Parametros JSON

Toda a parametrização do Ext utiliza o formato JSON, que é um formato bastante conhecido para quem utiliza Ajax. Este formato funciona da seguinte forma:

• Cada objeto possui um conjunto de chaves
• Cada array possui um conjunto de colchetes
• Cada propriedade de um objeto possui a sintaxe:

NomDaPropriedade : ValorDaPropriedade

Por exemplo, um objeto do tipo “Cliente” que possui as propriedades nome, email e telefones, possui a seguinte estrutura:

{ nome: “Nome do Cliente”, email: “cliente@cliente.com”, telefones: [{numero:”111222″},{numero:”222111″},{numero:”121212″}]}

A estrutura acima representa o seguinte objeto:

5) Obtendo elementos HTML da página

Todo elemento HTML da página que possui o atributo ID pode ser capturado pelo Ext através do comando “get“. Exemplo:

var myButton = Ext.get("btn1");

6) Capturando eventos

O commando “on” é utilizado no Ext para capturer eventos. Por exemplo:

var myButton = Ext.get("btn1");

myButton.on("click",function(e){alert("clicou")}}

Abraços!