Apostila de ExtJS com PHP e PostgreSQL

Criando interfaces web 2.0

Rodrigo K. Nascimento
rodrigoknascimento@gmail.com
FACCAT
Atualizado em 26 de Novembro de 2009
 Esta apostila tem por objetivo demonstrar os principais componentes e funes da biblioteca
JavaScript ExtJS. Como auxlio para a demonstrao de uma aplicao simples porm funcional,
ser usada a linguagem de programao PHP para a comunicao da interface (ExtJS) com o
servidor e o banco de dados PostgreSQL. Para melhor compreenso esta apostila est dividida da
seguinte forma:

Sumrio
JavaScript ........................................................................................................................................3
Introduo ao JavaScript.............................................................................................................3
Conhecendo e instalando o Firebug............................................................................................3
Formato de dados, funes e estrutura........................................................................................3
ExtJS................................................................................................................................................6
Conhecendo o ExtJS...................................................................................................................6
Instalando o ExtJS e testando......................................................................................................8
Parte Prtica 1: Montando uma interface simples.....................................................................12
AJAX.............................................................................................................................................13
O que , para que serve e quando usar......................................................................................13
Como o ExtJS se comunica com o servidor..............................................................................13
Instalando o servidor Apache....................................................................................................14
Testando o AJAX do ExtJS.......................................................................................................14
Parte Prtica 2: Interagindo nossa interface com o servidor.....................................................15
PHP................................................................................................................................................16
Conhecendo o PHP...................................................................................................................16
Instalando o PHP.......................................................................................................................16
Parte Prtica 3: Interagindo nossa interface com o servidor.....................................................17
PostgreSQL....................................................................................................................................18
Conhecendo o PostgreSQL.......................................................................................................18
Instalando o PostgreSQL e o PgAdmin.....................................................................................18
Criando nosso Banco de Dados................................................................................................19
Parte Prtica 4: Tornando nossa aplicao funcional................................................................19
Extend e Override..........................................................................................................................22
Adaptando o ExtJS as nossas necessidades..............................................................................22
Praticando um pouco mais.............................................................................................................23
Criando mais cadastros em nossa aplicao..............................................................................23
Fim.................................................................................................................................................24
Agradecimentos........................................................................................................................24
JavaScript

Introduo ao JavaScript
JavaScript uma linguagem de programao que permite a manipulao de objetos de uma
pgina web diretamente no browser, bem como o acesso a algumas informaes importantes como
qual o sistema operacional, qual o browser que est abrindo a pgina, qual a engine de renderizao
do navegador, etc. Permite tambm o acesso e manipulao de datas, pegar a data e hora do sistema
operacional, formatar ou criar novos objetos de data e hora.
Por ser uma linguagem de programao interpretada pelo browser em tempo de execuo o
JavaScript est sujeito a particularidades de cada navegador, um bom exemplo a diferena que
existe entre a forma de se criar uma requisio AJAX no Internet Explorer e no Firefox.
Internet Explorer
req = new ActiveXObject(Microsoft.XMLHTTP);

Firefox
req = new XMLHttpRequest();

Conhecendo e instalando o Firebug

Firebug um complemento para o navegador Firefox, ele permite que o desenvolvedor
possa analisar o JavaScript, css, html e carregamentos da pgina, tambm permite a manipulao do
JavaScript, html e css em tempo de execuo permitindo testes mais rpidos e diretamente na
pgina. Analisando por outro lado, essa facilidade que o Firebug disponibiliza um ponto fraco
para a segurana dos sites.
Instalando: Com o Firefox instalado v em Ferramentas>Complementos>Adicionar e
pesquise por Firebug, localize o Firebug, instale-o e reinicie o Firefox.

Formato de dados, funes e estrutura

Por ter tido uma colaborao considervel da SUN em sua criao o JavaScript tem a sintaxe
muito semelhante a do Java porm muito diferente em seu conceito e seu uso.

De acordo com seu sistema de tipos JavaScript :

Fraca - sua tipagem mutvel;
Dinmica - uma varivel pode assumir vrios tipos diferentes durante a execuo;
Implcita - as variveis so declaradas sem tipo.

Existem trs formas de declarao de variveis:

Escopo Global: variavel1 = 'a';
Escopo Local: var variavel1 = 'a';
Escopo do Objeto: this.variavel1 = 'a';

Existem duas formas de declarao de funes:

function funcao1(){};
var funcao1 = function(){};
 Atribuio e tipos de objetos:
String: var variavel1 = 'string';
Integer: var variavel1 = 123;
Float: var variavel1 = 123.5;
Objeto: var variavel1 = {};
Array: var variavel1 = [];
Boolean: var variavel1 = true;
Data: var variavel1 = new Date();
Funo: var variavel1 = function(){};

Operadores aritmticos:
+ x+y Soma ou concatena y a x;
- xy Subtrai y de x;
* x*y Multiplica x por y;
% x%y Retorna o resto da diviso de x por y;
/ x/y Divide x por y;
++ x++ Adiciona 1 a x;
-- x-- Subtrai 1 de y;

Operadores lgicos e relacionais

! !bool Inverte o resultado booleano da varivel ou expresso;
&& x && y True se x e y forem verdadeiros;
|| x || y True se x ou y ou ambos forem verdadeiros;
== x == y True se x for igual a y, no considera o tipo dos dados;
!= x != y True se x for diferente de y, no considera o tipo dos dados;
=== x === y True se x for igual a y e do mesmo tipo de dados;
!== x !== y True se x for diferente de y considerando o tipo dos dados;
< x<y True se x for menor que y;
<= x <= y True se x for menor ou igual a y;
> x>y True se x for maior que y;
>= x >= y True se x for maior ou igual a y;

Um objeto vazio representado por {} e um array vazio representado por [], sendo que
esses podem ser atribudos com inicializao de um objeto do respectivo tipo. Um array ou um
objeto podem conter dados de um ou mais tipos.

Exemplo de array com dados:

var variavel1 = ['valor1','valor2','valor3'];
var variavel1 = [0,1,2];
var variavel1 = ['valor1', 0, true];

Exemplo de acesso a um array:

var variavel2 = variavel1[1];

Exemplo de objeto com dados:

var variavel1 = {nome:'Joo', idade:13};
 Exemplo de acesso a um objeto:
var variavel2 = variavel1.nome;

Um objeto pode conter um array ou outros tipos assim como um array pode conter objetos
ou outros tipos, exemplo:
var variavel1 = [{nome:'Joo'}, {nome:'Jorge'}];
var variavel1 = {nome:['Joo','Jorge']};

Exemplo de objeto complexo:

var variavel1 = {
pessoas: ['Joo', 'Jorge'],
addPessoa: function(pessoa){
this.pessoas.push(pessoa);
}
}
variavel1.addPessoa('Rodrigo');

Uma classe em JavaScript uma funo que contm variveis e funes referenciadas a si,
ou seja, declaradas com thi, exemplo:
var classe1 = function(){
this.pessoas = [];
this.addPessoa = function(pessoa){
this.pessoas.push(pessoa);
}
}
var obj1 = new classe1;
var obj2 = new classe1;

obj1.addPessoa('Joo');
obj2.addPessoa('Jorge');

Javascript possui um recurso chamado prototype, que permite modificar uma classe depois
que ela foi criada. Permite inclusive alterar classes internas da linguagem. Aps as alteraes no
prototype da classe todos os objetos criados a partir desta sero afetados alm dos objetos criados
posteriormente. Tomando como base a classe j criada no exemplo acima, podemos exemplificar
adicionando uma funo de contagem de pessoas:
classe1.prototype.quantidadePessoas=function(){
return this.pessoas.length
}
obj1.quantidadePessoas(); //Deve retornar 1;

var obj3 = new classe1;

obj3.quantidadePessoas(); //Deve retornar 0, pois no foram adicionado dados;

Mas qual a real utilidade do prototype? Se voc deseja alterar uma classe que voc mesmo
criou porque no alterar diretamente no cdigo da classe, certo? Bom, existem casos onde temos a
necessidade de alterar classes que no criamos, classe de bibliotecas ou at mesmo classes do
prprio JavaScript, um exemplo seria criar a funcionalidade de adicionar uma sequencia de
caracteres a uma string para preenche-la at determinado tamanho, comumente chamado de Pad, no
exemplo abaixo iremos implementar um LeftPad a classe String do Javascript:
String.prototype.LeftPad = function (L, C) {
return new Array(L - this.length + 1).join(C || '0') + this;
 }
var teste = '12345'.LeftPad(10);
teste; //Deve nos retornar '0000012345;

ExtJS

Conhecendo o ExtJS
Citao de [HTML STAFF] ExtJS: Um excelente framework de Javascript

O ExtJS um framework Javascript criado originalmente como uma extenso do YUI

(Yahoo! User Interface). Na poca de sua criao, chamava-se yui-ext, funcionando junto
ao YUI, que era a base. Por ser uma extenso do YUI, o yui-ext no funcionava sem ele.

O ExtJS um software de cdigo livre criado por Jack Slocum, disponibilizado sob a
licena LGPL, porm pode ser comprado para vir com uma outra licena no-livre, caso
seja preciso, e tambm h como adquirir apenas o suporte pago do ExtJS o que d direito,
alm do suporte via frum, e-mail, telefone e onsite (dependendo do nvel de associao), o
acesso ao SVN do ExtJS onde esto as verses de desenvolvimento do ExtJS e as correes
ainda no liberadas publicamente.

Com o desenvolvimento do yui-ext, foram sendo incorporados diversos adapters

(adaptadores), que funcionavam de ponte entre o yui-ext e outros Frameworks de
Javascript: o Prototype e jQuery.

Com o crescente e rpido reconhecimento entre os desenvolvedores como uma extenso rica
em funcionalidades e componentes de interface acrescentando valor aos mais conhecidos
Frameworks de Javascript (YUI, Prototype e jQuery), o seu desenvolvimento foi ganhando
em colaboradores e velocidade. Assim, sucederam-se vrias verses 0.x do yui-ext, antes de
ser lanada a verso 1.0 final onde seu nome foi alterado para EXT JS, demonstrando que
ele j no era apenas uma extenso para o YUI.

A prxima release lanada foi o ExtJS 1.1, sendo que, a partir dessa verso houve um salto
tornando-o um verdadeiro Framework de Javascript ou AJAX Framework e no mais
limitado a ser apenas uma extenso para outros Frameworks, apesar de ainda poder ser
usado assim.

A partir da verso 1.1.1 o ExtJS passou a ser oficialmente suportado pelos navegadores
Microsoft Internet Explorer 6+, Mozilla Firefox 1.5+, Apple Safari 2+ e Opera 9+ e extra-
oficialmente com o Konqueror, Galeon, Ice Weasel, Mozilla, Netscape e provavelmente
outros.

Aps a srie 1.1, comeou a ser desenvolvido o ExtJS 2.0, trazendo vrias funes e
componentes bsicos completamente remodelados para trabalhar com mais eficincia e
cdigos menores.

Caractersticas

O ExtJS, por ser uma biblioteca Javascript cross-browser, prov o desenvolvedor de

ferramentas para criar interfaces para pginas e sistemas web-based com alta
performance, customizao e uma aparncia elegante.
Atualmente o ExtJS suportado oficialmente pelos navegadores Internet Explorer 6+,
FireFox 1.5+ (PC, Mac), Safari 3+ e Opera 9+ (PC, Mac).

Pode ser utilizado sob a GPL ou pode-se adquirir uma licena comercial, alm de ser
possvel a compra de suporte tcnico.

O ExtJS suporta os frameworks Yahoo! User Interface, Prototype e jQuery, atravs de

adapters (adaptadores). Alm disso, trabalha integrado com o Adobe AIR e com Google
Web Toolkit (GWT).

A sua utilizao bastante simples, uma vez que os arquivos necessrios sua utilizao
so includos na pgina HTML (ou PHP etc) atravs das tags <SCRIPT>, tal como a
incluso que qualquer arquivo *.js.

A documentao tambm farta, existindo uma ativa comunidade de utilizadores no Brasil,

alm da comunidade Norte-Americana.

A prpria documentao do ExtJS (ingls) fcil de entender e bastante dinmica, bem

como apresenta diversos exemplos de suas funcionalidades. Veja uma imagem da API de
documentao:

Existem ainda algumas ferramentas para criao visual de componentes, tais como
formulrios, todas disponveis gratuitamente, alm de plugins para algumas IDEs (Aptana,
por exemplo).

Concluso

Como se pode ver nas sees anteriores, o ExtJS facilita e muito o desenvolvimento web,
seja porque prov ao desenvolvedor de ferramentas poderosas para criao de interfaces
elegantes, funcionais e eficientes; seja porque retira do desenvolvedor a preocupao com a
elaborao visual, que s vezes no to importante quanto a camada de tratamento dos
dados.

Resumindo em uma frase popular, o ExtJS "bom, bonito e barato".

Para aqueles que desejam saber mais sobre esta biblioteca, aconselho a visita aos seguintes
endereos eletrnicos:
Site oficial do ExtJS;
Site da comunidade de utilizadores brasileiros do ExtJS;
http://www.extjs.com/deploy/dev/examples/samples.html
http://www.extjs.com/deploy/dev/docs/

No momento em que escrevo esta apostila a verso atual da biblioteca do ExtJS 3.0.0.
Instalando o ExtJS e testando
Instalando:
1. Entre na rea de download do site do ExtJS e faa a download da verso 3.0.0 da biblioteca,
ela vir compactada;
2. Dentro do pacote ZIP existe uma pasta chamada ext-3.0.0, extraia-a para uma pasta em seu
computador, se voc tiver um servidor web instalado aproveite para coloca-la dentro da
pasta do seu servidor;

Testando:
1. Crie um arquivo chamado index.html na mesma pasta que contm a pasta ext-3.0.0;
2. Crie um arquivo chamado index.js;
3. Abra o arquivo index.html e escreva o seguinte cdigo:
<html>
<head>
<title>Testando o ExtJS</title>
<link rel="stylesheet" type="text/css" href="ext-
3.0.0/resources/css/ext-all.css" />
<script src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script src="ext-3.0.0/ext-all.js"></script>
<script src="index.js"></script>
</head>
<body>
</body>
<button id="btClose">Fechar Janela</button>
</html>

4. Abra o arquivo index.js e escreva o seguinte cdigo:

Ext.onReady(function(){
var win = new Ext.Window({
height:200,
width:300,
title:'Teste',
html:'<b>Minha primeira janela em ExtJS</b>'
})
win.show();

Ext.get('btClose').on('click', function(){
win.close();
})
})

5. Abra o arquivo index.html em algum navegador, devemos ver uma janela azul em ExtJS
com ttulo Teste e contedo Minha primeira janela em ExtJS, caso isso no ocorra
revise seus cdigos.
Explicaes:
1. Carregamos 3 arquivos do ExtJS:
1. ext-all.css - contm os estilos que fazem a ligao do html gerado pelo ExtJS com a
Skin, a qual contm inmeras linhas de estilos e ligaes com imagens;
2. ext-all.js contm o cdigo de todos os componentes visuais e no visuais da biblioteca;
 3. ext-base.js o ExtJS pode funcionar ligado a essa biblioteca ou a outras como JQuery
atravs de adaptadores que so outros arquivos .js.
2. Carregamos o arquivo index,js onde colocaremos nosso cdigo JavaScript, essa diviso de
arquivos torna o cdigo mais organizado.
3. Dentro do index.js:
1. Ext.onReady recebe uma funo por parmetro, quando passamos uma funo por
parmetro chamamos de callback porque ela ser executada por outro pedao de cdigo
que no possui conhecimento desta funo, essa funo ser executada logo aps o
carregamento de todos os elementos de nossa pgina, evitando problemas. Sendo assim,
dentro desta funo anonima comeamos a escrever o cdigo que queremos que seja
executado ao abrir a pgina;
2. Criamos para uma varivel chamada win um compoente chamado Window (janela)
com largura de 300px, altura de 200px, titulo e um pequeno texto;
3. A partir do objeto criado para a varivel win chamamos o mtodo show o qual faz a
nossa janela ser renderizada na tela para o usurio, como no passamos posio ela ser
renderizada exatamente no centro da tela;
4. Ext.get(). Lembra do document.getElementById()? Pois , podemos compara-lo a
ele, com uma pequena diferena, Ext.get nos traz um elemento pelo id que ele contm na
sua tab html mas como um objeto do ExtJS, voc pode notar que com o Ext.get o objeto
retornado contm todas as propriedades e mtodos do objeto Ext.Element, olhe na
documentao, e a propriedade Ext.get('idElemento').dom nos retorna o que o
document.getElementById() nos retornaria. Sendo assim com o Ext.get podemos usar
de eventos facilmente, como neste caso associando um evento ao boto de id btClose.
Em um Ext.Element, que o que o Ext.get nos retorna, podemos usar do mtodo on
que recebe trs paramentos, o nome do evento a se associar, a funo de callback que
queremos executar quando esse evento ocorrer e o escopo, o escopo um paramentro
opcional e trataremos dele mais tarde. Em resumo, associamos uma funo ao evento
click do boto que pega a varivel onde temos a janela e executa o mtodo de fechar
(close).

Obs: muito importante manter um cdigo bem identado, isso facilita a vida de quem fez o cdigo,
de quem vai ler e do professor deste curso :) se possvel use um editor de texto que lhe ajude a
programar, principalmente um que contenha syntax highlight. Se no tiver um favorito tente o
Notepad++.

timo, agora que sabemos como iniciar a utilizao do ExtJS vamos comear com os exerccios:
1. Vamos praticar um pouco mais de Ext.get, temos em nosso cdigo acima um exemplo de
como fechar a janela no click de um boto. Crie mais um boto, no esquea de colocar um
id nico para ele, e faa com que nossa janela abra somente quando este boto for clicado.
Obs: coloque todo o cdigo de criao da janela dentro do evento do boto e declare a
varivel fora dos eventos.
2. Vamos praticar um pouco de lgica. Os mais curiosos provavelmente perceberam que a cada
vez que se clica no boto de criar a janela criada uma nova janela, isso acontece porque a
cada clique executamos nosso cdigo de criao sem antes verificar se a janela j existe,
sendo assim criamos uma nova janela para a mesma varivel e a antiga continua l, assim
perdemos a referencia das janelas anteriores pela varivel win, note que ao clicar no boto
de fechar a janela somente a ltima janela se fecha. Faa uma estrutura bsica de condio,
 um IF antes da criao da janela e verifique se a mesma ainda no foi criada para poder dar
continuidade ao cdigo. Exemplo de if onde o alert ser mostrado somente se a quantidade
for igual a zero:
var qtd = 0;
if(qtd === 0){
alert('quantidade zerada');
}
3. Voc deve ter notado que ao fechar a janela no conseguimos mais abri-la, isso se deve ao
fato de fecharmos a janela e no liberarmos a varivel, adicione aps o close() da janela o
cdigo win = null; para que ela passe em nosso teste de criao;
4. Altere as configuraes da janela para que ela no possua o boto de fechar, que ela no
possa ser redimensionada e que ela contenha um barra de status na parte inferior com um
boto alinhado a direita escrito Fechar e que ao ser clicado feche a janela.

Xtype
O Xtype uma forma abreviada de se criar um componente dentro de outro no ExtJS, os
dois exemplos abaixo tem o mesmo efeito:
var win = new Ext.Window({
height: 200,
width: 300,
items:[new Ext.Panel({
title: 'Titulo',
html: 'texto'
})]
})
win.show();

var win = new Ext.Window({

height: 200,
width: 300,
items:[{
xtype: 'panel',
title: 'Titulo',
html: 'texto'
}]
})
win.show();

Exemplo de janela com formulrio e 3 campos, onde o campo nome no pode ser nulo:
var win = new Ext.Window({
height: 200,
width: 300,
layout: 'fit',
items:[{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Nome',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Sobrenome',
width: 160
},{
xtype: 'datefield',
fieldLabel: 'Data Nascimento'
 }]
}]
})
win.show();
Exerccios
5. Pegando o exemplo de formulrio acima, faa com que o campo Sobrenome no permita
nulo e adicione os seguintes campos:
1. Endereo (campo texto);
2. Data Cadastro (campo data, no pode ser nulo);
3. Profisso (Campo texto).

Exemplo de grid com dados:

var win = new Ext.Window({
height: 200,
width: 300,
layout: 'fit',
items:[{
xtype:'grid',
store: new Ext.data.ArrayStore({
fields:[
{name:'nome'},
{name:'profissao'},
{name:'idade', type:'int'}
],
data: [
['Rodrigo','Programador','21'],
['Hullen','Programador','23'],
['Gabriel','Programador','26']
]
}),
columns:[
{
id: 'nome',
header: 'Nome',
width: 100,
sortable: true,
dataIndex: 'nome'
},{
id: 'profissao',
header: 'Profisso',
width: 100,
sortable: true,
dataIndex: 'profissao'
},{
id: 'idade',
header: 'Idade',
width: 50,
sortable: true,
dataIndex: 'idade'
}
]
}]
})
win.show();

Exerccios
6. Pegando o exemplo de grid acima, adicione o campo Sobrenome no store, coloque dados
 para esse campo, faa com que ele aparea no grid e faa com que este campo no possa ser
ordenado.

Parte Prtica 1: Montando uma interface simples

Criar uma interface simples:
1. Criar um Viewport de layout border, contendo as regies north, east, center e south;
2. Criar uma toolbar na regio norte contendo os botes:
1. Cadastro (com submenu)
Pessoas (Deve abrir a Aba de Cadastro Pessoas)
Cidades (Sem funcionalidade por enquanto)
2. Teste (um boto toggle sem funcionalidade)
3. Um texto de boas vindas ao usurio
4. Sair (um boto sem funcionalidade alinhado a direita)
3. A regio east deve ter o ttulo Propagandas, largura de 100px e poder ser minimizada
(collapse);
4. A regio south de ter altura de 100px, o ttulo Noticias, poder ser minimizada, vir
minimizada por padro, ser redimensionavel e ter o modo de collapsed como mini;
5. A regio center deve ser um tabPanel;
6. Criar uma tab na regio central com ttulo Ol Mundo e que fique ativa por padro
7. Ao clicar no boto Cadastro > Pessoas criar uma nova tab na regio central contendo um
grid conforme a figura abaixo.
8. O grid deve conter as colunas Nome, Idade e Profisso;
9. Para maiores detalhes comparem a figura abaixo com a sua tela.
AJAX

O que , para que serve e quando usar.

Citao de Wikipdia: AJAX (programao):
AJAX (acrnimo em lngua inglesa de Asynchronous Javascript And XML) o uso
metodolgico de tecnologias como Javascript e XML, providas por navegadores, para
tornar pginas Web mais interativas com o usurio, utilizando-se de solicitaes
assncronas de informaes. AJAX no somente um novo modelo, tambm uma iniciativa
na construo de aplicaes Web mais dinmicas e criativas. AJAX no uma tecnologia
so realmente vrias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua
parte, oferecendo novas funcionalidades.

AJAX resumidamente uma forma de se comunicar com o lado servidor sem a necessidade
de recarregar a pgina WEB, tornando assim possvel a separao perfeita de uma aplicao em
camadas (MVC). Ele permite que sejam enviados dados do lado cliente para o lado servidor por
POST ou GET e receber dados do servidor como um texto.
A utilizao do AJAX recomendada nos casos onde h a necessidade de enviar dados para
o servidor e/ou trazer dados para a tela de forma minimalista evitando o recarregamento de todos os
elementos de uma pgina, evitando assim tambm o tempo de espera no carregamento de uma
pgina. A sua utilizao no recomendada para trfego de informaes importantes, como dados
de login.
Importante, AJAX uma requisio assncrona, ou seja, o cdigo continua a ser executado
enquanto a requisio est em andamento, o cdigo no espera pela resposta do servidor, por isso
trabalhamos com funes de callback, uma funo anonima passada para a requisio, esta funo
ser chamada ao termino da requisio e receber por parmetro os dados da requisio e o retorno
da mesma, sendo assim temos que trabalhar com os dados dentro deste callback.

Como o ExtJS se comunica com o servidor

O ExtJS prove um componente no visual chamado Ext.Ajax a qual nos permite criar
requisies AJAX de forma fcil e clara, vrios componentes do ExtJS se utilizam deste
componente para realizar transaes AJAX de maneira mais abstrata ao programador como os
Stores, a propriedade autoLoad e o mtodo load do componente Ext.Panel e seus derivados.
A comunicao em AJAX ocorre basicamente da seguinte forma:
1. enviada uma requisio ao servidor, igualmente ao ato de abrir uma pgina, onde
podem ser passados dados por POST ou GET, igual ao envio de um formulrio da
maneira tradicional;
2. Ocorre o processamento dos dados do lado servidor caso seja chamada uma pgina
que contenha programao do lado servidor;
3. retornado todo o cdigo que seria impresso na tela para o usurio caso abrssemos
a pgina diretamente pelo navegador.
Ou seja, se requisitarmos um arquivo texto, teremos o retorno exato do contedo deste
arquivo, se requisitarmos um arquivo PHP teremos o retorno deste arquivo processado como se
abrssemos este arquivo pelo navegador. Sendo assim, nosso retorno um texto puro, podendo ele
conter HTML ou no.
 No ExtJS podemos dizer que a forma de trabalharmos com AJAX um pouco diferente,
podemos criar uma requisio AJAX na mo e trabalharmos com o retorno dela de forma normal,
porm quando usamos de componentes que fazem este acesso por ns ficamos sujeitos a algumas
convenes. Em geral ao criarmos uma requisio Ext.Ajax.request temos em mente trabalhar
diretamente com os dados retornados, quando usamos um Store por exemplo o componente se
encarrega de trabalhar com os dados, para isso precisamos retornar-los em formato JSON, XML ou
ARRAY.

Instalando o servidor Apache

A instalao do servidor Apache simples e se resume no seguinte:
1. Baixar a ultima verso do arquivo binrio Win32 sem OpenSSL (MSI Installer) no
site do Apache;
2. Executar o instalador;
3. Na primeira tela basta clicar no boto Next;
4. Nesta tela temos que aceitar os termos da licena, para isso certifique de que est
marcado o campo I accept the terms in the license agreement e clique em Next;
5. Nesta tela clique em Next;
6. Nesta tela temos de colocar algumas configuraes do nosso servidor, para questo
de teste coloque dados ficticos como os exmplos acima de cada campo, deixe
marcado o campo For All Users, on Port 80... e clique em Next;
7. Nesta tela selecione a opo Typical para fazer a instalao padro e clique em Next;
8. Nesta tela selecione a pasta de instalao, recomendo deixar a pasta padro e clique
em Next;
9. Nesta tela clique em Install e aguarde a instalao.
10. Ir abrir uma tela de instalao completa, Installation Wizard Completed, clique em
Finish.
11. Pronto, Apache instalado.
12. Abra seu navegador e digite http://localhost/, se aparecer bem grande escrito It
Works!, parabns voc o mais novo proprietrio do seu prprio servidor WEB.

A pasta padro do servidor Apache onde devem ficar os arquivos do seu site uma pasta
chamada htdocs, esta pasta fica dentro da pasta de instalao do servidor apache. Caso voc queira
trocar esta pasta para um caminho mais amigvel ou para outra unidade de disco basta editar o
arquivo httpd.conf que se encontra dentro da pasta conf que est dentro da pasta de instalao do
apache e trocar as duas ocorrncias do caminho padro pelo caminho desejado e reiniciar o apache.
Dica, use o comando de procurar e procure por htdocs.

Testando o AJAX do ExtJS

Vale lembrar que AJAX uma comunicao de dados entre cliente e servidor, por isso s
podemos utiliza-lo em arquivos que estejam rodando atravs de servidores como o Apache que
instalamos anteriormente. Abrir um arquivo diretamente pelo navegador dando 2 cliques no mesmo
carrega o arquivo de fora do servidor, para garantir que o arquivo esteja sendo carregado atravs do
servidor verifique se o inicio da URL em seu navegador consiste em http://localhost/.
 Exemplo 1: AJAX e manipulao do retorno dos dados:
1. Crie os arquivos html e js como de costume;
2. Dentro do Ext.onReady do arquivo js coloque o seguinte cdigo:
Ext.Ajax.request({
url:'noticia.txt',
success:function(r){
alert(r.responseText)
}
})

3. Crie um arquivo chamado noticia.txt e coloque o seguinte contedo:

Notcia carregada por AJAX. Forma interessante de se trabalhar.
Exemplo 2: AJAX e carregamento de contedo de forma simplificada:
1. Crie os arquivos html e js como de costume;
2. Dentro do Ext.onReady do arquivo js coloque o seguinte cdigo:
var win = new Ext.Window({
height:200,
width:300,
title:'Ajax em uma Window',
autoLoad:'noticia2.txt'
})
win.show();
3. Crie um arquivo chamado noticia2.txt e coloque o seguinte contedo:
Notcia carregada por AJAX.<br/>Forma interessante de se trabalhar.

Exerccios
7. Pegando o exerccio 6 onde temos um grid ligado a um store, troque o store por um que
aceite JSON, retire os dados escritos diretamente no store e coloque-os em um arquivo, por
exemplo grid.txt, defina a url de leitura dos dados e formate em JSON os dados do arquivo
txt. Note que os dados no sero carregados, temos que dizer ao store para carrega-los e para
isso h duas formas, colocar autoLoad:true como configurao do store, ou depois de cria-lo
pegar sua referencia e executar o mtodo laod (meuStore.load()). Como no temos
referencia do store e nem um id para o mesmo temos de usar a opo autoLoad:true que faz
com que os dados sejam carregados assim que o store for criado.

Parte Prtica 2: Interagindo nossa interface com o servidor

Altere nosso pequeno sistema para que os dados passem a ser carregados por AJAX de
arquivos .txt no lado servidor. Faa com que possam ser inseridos dados nos grids atravs de
formulrios, analise, estude a escolha um dos mtodos usados no arquivo pratica1.1.js. Crie novos
cadastros para praticar um pouco mais. E faa com que ao se clicar no menu para abrir um cadastro
j aberto este cadastro ganhe foco, ou seja, a tab deste cadastro fique ativa.
PHP

Conhecendo o PHP
Citao de Wikipdia: PHP:
PHP (um acrnimo recursivo para "PHP: Hypertext Preprocessor") uma
linguagem de programao de computadores interpretada, livre e muito utilizada para
gerar contedo dinmico na World Wide Web, como por exemplo a Wikipdia.
A linguagem PHP uma linguagem de programao de domnio especfico, ou seja,
seu escopo se estende a um campo de atuao que o desenvolvimento web, embora tenha
variantes como o PHP-GTK. Seu propsito principal de implementar solues web
velozes, simples e eficientes.
Caractersticas:
Velocidade e robustez
Estruturado e orientao a objeto
Portabilidade - independncia de plataforma - escreva uma vez, rode em qualquer
lugar;
Tipagem fraca
Sintaxe similar a Linguagem C/C++ e o PERL

O PHP tem a sintaxe muito similar a sintaxe do JavaScript, usamos de chaves {} para definir
inicio e fim de blocos de cdigo como o contedo de um IF por exemplo, temos variveis com
tipagem entre outras coisas. O PHP nos permite manipular os dados no lado servidor de nossa
aplicao e o mais importante lembrar que temos que imprimir esses dados na tela, para isso
usamos o comando echo que veremos muito no resto da apostila. Em resumo, o que ser impresso
na tela pelo PHP o que o usurio ver se acessar a pagina .php ou o que receberemos por AJAX se
requisitarmos esta pgina .php.

Instalando o PHP
A instalao do PHP ainda mais fcil que a instalao do Apache:
1. Baixe o arquivo do instalador do PHP para windows aqui, selecione o arquivo VC6
x86 Thread Safe tipo Installer, esse o instalador pra quem tem Apache instalado;
2. Execute o instalador;
3. Na primeira tela, Well Come ..., do instalador clique em Next;
4. Na segunda tela, End-User License Agreement, marque o campo I accept the
terms in... para aceitar os termos do contrato de licena e clique em Next;
5. Na terceira tela, Destination Folder, selecione o caminho de instalao ou deixe o
padro e clique em Next;
6. Na quarta tela, Web Server Setup, selecione a opo Apache 2.2.x Module para
que o PHP configure o Apache para ns e clique em Next;
7. Na quinta tela, Apache Configuration Directory, selecione a pasta de configurao
do Apache que a pasta conf dentro da pasta de instalao do apache e clique em
Next;
 8. Na sexta tela, Choose Items to Install, h uma arvore, abra o n PHP e dentro dele
abra o n Extencions para selecionarmos as extenses que queremos instalar junto
ao PHP, verifique se a extenso PostgreSQL est selecionada, se no estiver
selecione-a clicando no icone ao lado do nome e clicando na primeira opo da lista.
Caso deseje usar outro banco como o MySQL faa a ativao da extenso para o
banco desejado e clique em Next;
9. Na stima tela, Ready to install PHP ..., clique em Install e aguarde o trmino do
processo de instalao;
10. Na oitava tela, Completed the PHP Setup Wizard, clique em Finish;
11. Reinicie o Apache;
12. Crie um arquivo teste.php no pasta do servidor Apache e escreva dentro o seguinte:
<?php
phpinfo();
?>
13. Abra o arquivo no navegador atravs do localhost e veja se apareceu o relatrio das
configuraes do PHP.

Parte Prtica 3: Interagindo nossa interface com o servidor

Troque nossos arquivos .txt que contm nossos dados em formato JSON por arquivos .php e
crie neles a estrutura de dados como exemplificado abaixo.
Exemplo de impresso dos dados em JSON de 2 campos:
<?php
$campos = array(); //Cria um array vazio
$linhas = array();

$campos['estado'] = 'Rio Grande do Sul';

$campos['uf'] = 'RS';
$linhas[] = $campos; //Adiciona os campos ao primeiro item

$campos['estado'] = 'Santa Catarina';

$campos['uf'] = 'SC';
$linhas[] = $campos;

echo json_encode($linhas); //Imprime os campos em JSON

?>
PostgreSQL

Conhecendo o PostgreSQL
Citao de Wikipdia: PostgreSQL:
Hoje, o PostgreSQL um dos SGBDs (Sistema Gerenciador de Bancos de Dados) de cdigo
aberto mais avanados, contando com recursos como:
consultas complexas
chaves estrangeiras
integridade transacional
controle de concorrncia multi-verso
suporte ao modelo hbrido objeto-relacional
gatilhos
vises
Linguagem Procedural em vrias linguagens (PL/pgSQL, PL/Python, PL/Java,
PL/Perl) para procedimentos armazenagem
Indexao por texto
Estrutura para guardar dados Georeferenciados PostGIS

Instalando o PostgreSQL e o PgAdmin

Vamos instalar o PostgreSQL:
1. Baixe a ltima verso do instalador do PostgreSQL para windows aqui, baixe o the
one click installer;
2. Execute o instalador e aguarde o incio da tela de configuraes;
3. Na primeira tela, Setup PostgreSQL, clique em Next;
4. Na segunda tela, Installation Directory, selecione um diretrio de instalao ou
deixe o padro e cliqe em Next;
5. Na terceira tela, Data Directory, selecione o diretrio que conter os arquivos dos
bancos de dados do PostgreSQL ou deixe o padro e clique em Next;
6. Na quarta tela, Password, informe uma senha para o super-usurio (postgres) do
banco, ser criado um usurio no windows chamado postgres que ter esta mesma
senha. Repita a senha no segundo campo e clique em Next;
7. Na quinta tela, Port, informe a porta que deseja rodar o servio de banco de dados
do PostgreSQL ou deixe a porta padro e clique em Next;
8. Na sexta tela, Advanced Options, informe a localidade desejada no primeiro
campo como por exemplo Portugues, Brazil, marque o item Install pl/pgsql in
template1 database e clique em Next;
9. Na stima tela, Ready to Install, clique em Next e aguarde a instalao terminar;
10. Na oitava tela, Completing the PostgreSQL Setup Wizard, desmarque a opo
Launch Stack Builder at Exit e clique em Finish;
11. Procure no menu iniciar pelo diretrio do PostgreSQL e abra o PgAdmin contido
nele;
12. De 2 cliques no servidor PostgreSQL localhost contido na lista a esquerda e informe
a senha do usurio postgres;
13. Estamos prontos para comear a criar nosso banco de dados.
Criando nosso Banco de Dados
1. Abra o PgAdmin;
2. Crie um novo banco de dados de nome extjs, dono postgres e codificao UTF8;
3. Conecte no banco extjs recm criado;
4. Dentro do esquema public crie as seguintes tabelas:
1. Tabela de nome pessoas, dono postgres e as seguintes colunas:
id, integer, PK;
nome, character variyng (60);
profissao, character variyng (30);
idade, integer;
2. Tabela de nome cidades, dono postgres e as seguintes colunas:
id, integer, PK;
cidade, character variyng (20);
uf, character variyng (2);

Parte Prtica 4: Tornando nossa aplicao funcional

1. SELECT: Altere nossos arquivos .php para que ele busque as informaes do banco de
dados, para isso basta conectar ao banco, executar uma pesquisa e imprimir o resultado em
JSON, exemplo:
<?php
$h = 'localhost'; //Local do banco
$p = 5432; //Porta do banco
$db = 'extjs'; //Banco a se conectar
$u = 'postgres'; //Usurio
$pw = 'postgres'; //Senha

//Tenta conectar e passar a referencia para $db, se no for possvel

//ele termina a execuo com erro e imprime o erro do banco
if(!$db = pg_connect("host=$h port=$p dbname=$db user=$u password=$pw"))
die ("Erro ao conectar ao banco<br/>".pg_last_error($db));

//Executa um SQL no banco e guarda o retorno em $result

$result = pg_query($db, "SELECT id, nome, profissao, idade FROM pessoas");

//Se $result est definido a query teve sucesso

if($result){
//Pega todos os dados da consulta em um array bidimencional
//e os codifica para JSON
echo json_encode(pg_fetch_all($result));
}else{
echo "Erro na consulta.";
}
?>
2. INSERT: Agora devemos alterar os arquivos PHP e JS, no arquivo PHP precisamos de uma
estrutura condicional que verifique que ao estamos requisitando, agora teremos duas aes
(SELECT e INSERT) e no arquivo JS precisamos enviar as informaes do formulrio para
o PHP e tambm precisamos enviar qual a ao que queremos realizar.
JS: O FormPanel possui um mtodo interno pra enviar os dados por ajax para o
servidor, o mtodo submit do formulrio interno que tambm possui o mtodo isValid
que verifica se todos os campos esto corretos de acordo com suas validaes.
Observao importante, cada campo do formulrio deve ter a propriedade name
identificando um nome para cada campo, este o nome que usaremos no lado servidor
para pegar os valores enviados. Exemplo:
//isValid retorna true se todos os campos estiverem corretos
if(Ext.getCmp('idDoFormPanel').getForm().isValid()){
Ext.getCmp('idDoFormPanel').getForm().submit({
url:'arquivo.php', //url do arquivo a receber os dados
params:{ //parametros adicionais
acao:'insert'
},
success:function(){
//Cdigo a ser executado ao termino do AJAX
//Como recarregar um grid por exemplo;
}
})
}else{
alert('campos invlidos');
}
PHP: Antes tnhamos apenas uma ao para o arquivo PHP em questo que era retornar
os dados do banco, agora temos 2 (SELECT e INSERT) e no futuro termos mais 2
(UPDATE e DELETE), por esse motivo precisamos saber no lado PHP que ao o lado
cliente est requisitando, para isso passamos um parmetro por POST ao arquivo
informando qual a ao a ser executada e dentro do cdigo PHP podemos fazer um IF e
separa os blocos de ao. O cdigo abaixo no substitui o cdigo j criado no arquivo
PHP, apenas um exemplo de como implementar a condio da ao a ser requisitada.
Cada campo pego por $_POST['nomeDoCampo']. Exemplo:
if($_POST['acao']=='insert'){
$id = '(SELECT COALESCE(MAX(id), 0)+1 FROM pessoas)';
$nome = $_POST['nome'];
$profissao = $_POST['profissao'];
$idade = $_POST['idade'];

$result = pg_query($db, "INSERT INTO pessoas(id, nome,

profissao, idade) VALUES($id, '$nome', '$profissao', $idade)");
}else{
//Bloco de cdigo a ser executado case no seja ao 'insert'
//Como o select por exemplo;
}
3. DELETE: Para implementarmos a deleo precisamos alterar os dois lados da aplicao.
JS: Precisamos adicionar o campo ID no nosso store para que possamos envia-lo ao PHP
para identificar qual registro queremos excluir, esta alterao no exemplificarei aqui
pois simples, e precisamos adicionar um boto em nossa tela, na TBAR por exemplo, e
definir em seu HANDLER um requisio ajax enviando a ao quer queremos realizar e
o ID do registro a ser excludo. Exemplo:
var grid = Ext.getCmp('gridPessoas');
if(grid.getSelectionModel().getSelected()){
Ext.Ajax.request({
url:'arquivo.php',
params:{
acao:'delete',
id:grid.getSelectionModel().getSelected().data.id
},
success:function(){
grid.getStore().reload();
}
})
}
PHP: Precisamos criar mais um IF para esta ao:
if($_POST['acao']=='insert'){
//Cdigo da ao de insert
}if($_POST['acao']=='delete'){
$id = $_POST['id'];
$result = pg_query($db, "DELETE FROM pessoas WHERE id = $id");
}else{
//Cdigo da ao de select
}
4. UPDATE: Essa uma ao complicada, ela se resume em pegar a linha selecionada no grid,
carregar estes dados para um formulrio de forma que o usurio possa editar as informaes
e envia-las por submit com a ao de update.
JS: Crie um boto para a alterao, copie o handler do boto de adicionar, coloque um
IF em torno deste cdigo verificando se existe uma linha selecionada no grid, adicione
um campo a mais no formulrio para conter o ID do registro, exemplificarei abaixo,
adicione um listeners na window e dentro adicione o evento show, dentro deste evento
carregue os dados para o formulrio (os campos devem ter os mesmos nomes dos
campos do store) e no handler do boto de salvar altere a ao para update:
//cdigo a ser adicionado a window
//listeners uma propriedade da window assim como height, width,
etc
listeners:{
show: function(){
var form = Ext.getCmp('formPessoas').getForm();
form.loadRecord(grid.getSelectionModel().getSelected());
}
}
PHP: Temos de adicionar mas um bloco de cdigo:
if($_POST['acao']=='update'){
$id = $_POST['id'];
$nome = $_POST['nome'];
$profissao = $_POST['profissao'];
$idade = $_POST['idade'];

$result = pg_query($db, "UPDATE pessoas SET nome = '$nome',

profissao = '$profissao', idade = $idade WHERE id = $id");
}
Extend e Override

Adaptando o ExtJS as nossas necessidades

Ext.extend e Ext.override so formas de modificar e adicionar classes da biblioteca ExtJS,
ambos so funes internas da biblioteca.
1. Extend: Esta funo nos permite estender uma classe j existente adicionando novas
propriedades, mtodos, eventos e valores padro. Um bom e simples exemplo seria estender
a classe Window para uma classe chamada MyWindow e adicionar a ela altura e largura
padro:
Ext.onReady(function(){
Ext.namespace('Ext.ux');
Ext.ux.MyWindow = Ext.extend(Ext.Window, {
height:200,
width:300
})

var win = new Ext.ux.MyWindow({

title:'Teste',
html:'<b>Minha primeira janela em ExtJS</b>'

})
win.show();
})
2. Override: Esta funo nos permite adicionar funcionalidades a uma classe j existente sem
que seja necessria a criao de uma nova classe. Um bom exemplo seria adicionar um
mtodo a classe Ext.data.Store que nos permita adicionar registros mais facilmente como
demonstrado no cdigo abaixo, um exemplo mais complexo e de grande utilidade um
override que nos permite adicionar colunas em um formulrio de forma fcil que pode ser
encontrado aqui:
Ext.override(Ext.data.Store, {
insertRecord: function(record,index){
index = index || 0;
record = record || {};
this.insert(index, new this.recordType(record,null,true))
}
})
//Antes do override tinhamos de proceder assim:
//store.insert(0, new store.recordType(form.getForm().getValues()));

//Aps o override podemos proceder assim:

//store.insertRecord(form.getForm().getValues());
Praticando um pouco mais

Criando mais cadastros em nossa aplicao

Esta parte est destinada a ltima aula deste curso e consiste em criar novos cadastros para
praticarmos um pouco mais, esta criao de novos cadastros envolve criao de tabelas no banco de
dados, criao dos arquivos PHP necessrios e adio dos cdigos JavaScript necessrios.
Aconselho quem estiver com alguma dificuldade criar mais cadastros de campos corridos,
como um cadastro de empresas por exemplo, e quem estiver mais seguro aconselho a criao de um
cadastro de estados fazendo as alteraes na tabela e tela do cadastro de cidades para efetuar a
ligao entre ambos e que o usurio possa selecionar em um combobox o estado da cidade.
E por fim aconselho a todos soltar a imaginao, estudar os exemplos e a documentao e
claro, pedir ajuda a alguem mais experiente em ExtJS, no caso deste curso presencial, o professor.
Fim

Agradecimentos
Obrigado a todos que estiveram presentes neste pequeno curso, aos laboratoristas e claro aos
professores da FACCAT em especial ao coordenador do curso de Sistemas de Informao Marcelo
Azambuja.
Abraos a todos.