Então, já conhecemos o Ext, e agora vamos botar a mão na massa !

Com um exemplo bem simples, podemos entender melhor como montar nossas paginas em Ext

Vamos iniciar com o Download do pacote do Ext:
Vá em extjs.com e clique no icone de “ExtJS for web developers”
Atualmente, a versão 3.1.1 é a que está disponivel.

Ah, para saberem, o ExtJS pode trabalhar em conjunto com mais algumas bibliotecas JS como: JQuery, Yahoo, Prototype e Scriptacuolus, porém eu nunca o utilizei desta forma.

Do Ext vamos precisar basicamente de 3 arquivos (veja o arquivo ./ext-3.1.1/INCLUDE_ORDER.txt) que serão referenciados na nossa pagina :
./ext-3.1.1/adapter/ext/ext-base.js
./ext-3.1.1/ext-all.js
./ext-3.1.1/resources/css/ext-all.css

Com o ext, podemos trocar o tema de cores das janelas e componentes, e no pacote padrão temos 3 temas, que se acrescentados depois do arquivo ext-all.css, funciona corretamente, alterando as cores.
./ext-3.1.1/resources/css/xtheme-access.css
./ext-3.1.1/resources/css/xtheme-blue.css
./ext-3.1.1/resources/css/xtheme-gray.css
E no fórum, pode-se achar mais alguma tema ou outro !

Bom, geralmente, eu tenho trabalhado com os JS separados do arquivo html, bem como os CSS, podendo assim reutilizar muitas coisas.
Então, vamos fazer assim também nossos exemplos.

Como o Ext faz todo o trabalho sujo de detectar o browser, ajustar coisas, resolver bugs de css e etc, então não precisamos nos preocupar com nada disto, e trabalhar como se montássemos uma simples interface em GTK ou QT por exemplo. Ok !

Vou colocar um exmplo simples abaixo, e depois vou explicar o que codifiquei:

Arquivo: index.html

[html]
    [head]
        [meta http-equiv="Content-Type" content="text/html; charset=utf-8" /]
        [title id='title']Ext HTML Sample[/title]

        
        

        

        
        
        < script src="http://moonmoon.archlinux-br.org//ext-3.1.1/adapter/ext/ext-base.js" type="text/javascript" >< /script >
        
        < script src="http://moonmoon.archlinux-br.org//ext-3.1.1/ext-all.js" type="text/javascript" >

        
        < script src="http://moonmoon.archlinux-br.org//index.js" type="text/javascript" >
    [/head]
    [body]
		 
    [/body]
[/html]

Ext.onReady(function(){
	Ext.ns("Index");

	Index.init = function(){

		win = new Ext.Window({
			layout:'fit',
			width:500,
			height:300,
			closeAction:'hide',
			plain: true,
			title: 'Janela de Exemplo - berlotto.blog.br',

			items: new Ext.TabPanel({
				activeTab:0,
				deferredRender:false,
				border:false,
				items:[{
					xtype: 'form',
					id: 'tabOne',
					title: 'Tab Um',
					bodyStyle: 'padding: 6px',
					items: [{
						xtype: 'textfield',
						id: 'txtCampoTabOne',
						fieldLabel: 'Campo 1'
					}]
				},{
					xtype: 'form',
					id: 'tabTwo',
					title: 'Tab Dois',
					//bodyStyle: 'padding: 6px',
					items: [{
						xtype: 'numberfield',
						id: 'txtCampoTabTwo',
						fieldLabel: 'Campo 2'
					}]
				}]
			}),

			buttons: [{
				text:'Enviar',
				handler: function(){
					Ext.Msg.alert('Exemplo ExtJS', 'Dados salvos com sucesso!');
				}
			},{
				text: 'Fechar',
				handler: function(){
					win.hide();
				}
			}]
		});

		win.show();

	};

	Index.init();

}); //end onReady

O que ocorre ? Vamos por parte, como diria Jack:
1.
Ext.onReady(function(){ …
Este é um evento do ext que é chamado quando ele for corretamente inicializado, e em 99% dos casos, os nossos codigos do Ext estará dentro deste método, garantindo que o FW estará carragado e OK para funcionar.

2.
Ext.ns(“Index”);
Definimos nosso Namespace, como detalhado no post anterior.

3.
Index.init = function(){ …
Dentro do nosso namespace chamado “Index”, criamos um objeto chamado “init”, que por sua fez recebeu uma function. Então agora temos uma nova função que pode ser chamada com: Index.init(), como visto no final no nosso arquivo index.js

4.
Conteúdo da nossa página ! O Ext tem vários tipos de componentes/widgets, e para que possamos utilizar temos que adicioná-los em um Container, que neste caso é nossa janela ( Ext.Window ). Os containers do Ext podem ser por exemplo: Ext.BoxComponent, Ext.Panel, Ext.Window, Ext.form.FormPanel, Ext.Toolbar, entre outros.

5.
Cada widgets tem suas propriedades e características, no Ext, temos uma imensidão de objetos que podemnos utilizar nas nossas aplicações, e com o que temos hoje, podemos criar muita coisa, sem ter que customizar nada mesmo, ou utilizar widgets criados pela comunidade ! Mas tem uma priedade especial: xtype.
O que ela faz ? Ela indica qual o tipo de objeto que será criado, assim:
Foi dito que no ext um Ext.form.FormPanel também é conhecido por “form”, OK !
Então quando criamos, no nosso exemplo, o nosso TabPanel, dentro da Window, dissemos que os items deste TabPanel são dois forms, porém você não vê um “new Ext.form.FormPanel” ali, você vê um “xtype: ‘form’” correto ? Sim, isto funciona, pois já temos um “new” acontecendo no objeto pai, então quando ele encontrar alguns objetos JSON com a propriedade xtype definida, ele tentará dar um new no respectivo objeto, conforme podemos ver neste link da documentação:
http://www.extjs.com/deploy/dev/docs/?class=Ext.Component

6.
Nestes mesmos dois forms que foram criados, temos a propriedade “bodyStyle”, 1 comentada e a outra não, para que vocês vejam, que apenas um pouquinho de conhecimento de CSS poderemos alterar alguns detalhes interessantes nos nossos widgets. Esta é apenas 1 das formas de se fazer isto.

7.
Neste exemplo, eu coloquei dois botões na janela e em um deles, coloquei uma mensagem de sucesso, porém não faz nada além de mostrar a mensagem, como podemos ver. E como geralmente gostamos de mostrar mensagens para ver se algum evento ou objeto está funcionando corretamente, nada mais justo que utilizar o proprio ext para isto neh !
Ah, detalhe: Nada no Ext é SINCRONO, ou seja, tudo é chamado, e nada fica trancado aguardando retorno, como as chamadas Ajax, esta chamada para a MessageBox mesmo, a chamada daquele “win.show()”, etc… é tudo ASINCRONO. Lembre sempre disto. Porém o Ext tem algumas ferramentas que nos ajudam quando precisamos montar algumas chamadas mais criticas, que necessitam ser ordenadas ( ver: http://www.extjs.com/deploy/dev/docs/?class=Function ).

Bom, acho que já ficou bem grandinha esta aula, então façam assim: olhem na documentação, as propriedades, eventos e métodos que estes componentes, por nós utilizados, tem e façam suas alterações e testes, nesta mesma tela. E voltem aqui para deixar suas perguntas, caso fiquem com alguma duvida. Ok !

PS.: Desculpem a codificação do index.html, pois não mostrou corretamente o codigo aqui no blog, então tive que alterar as tags.
codigo-ext-js (0)