Apostila de ext js com php e postgresql v1.0

Apostila de ExtJS com PHP e PostgreSQL
Criando interfaces web 2.0
Rodrigo K. Nascimento
rodrigoknascimento@gmail.com
http://www.rkn.com.br
FACCAT
Atualizado em 9 de Abril de 2010

Esta apostila tem por objetivo demonstrar os principais componentes e funções da biblioteca
JavaScript ExtJS. Como auxílio para a demonstração de uma aplicação simples porém funcional,
será usada a linguagem de programação PHP para a comunicação da interface (ExtJS) com o
servidor e o banco de dados PostgreSQL. Para melhor compreensão esta apostila está dividida da
seguinte forma:
Sumário
JavaScript ........................................................................................................................................3
Introdução ao JavaScript.............................................................................................................3
Conhecendo e instalando o Firebug............................................................................................3
Formato de dados, funções e estrutura........................................................................................4
ExtJS................................................................................................................................................7
Conhecendo o ExtJS...................................................................................................................7
Instalando o ExtJS e testando......................................................................................................9
Parte Prática 1: Montando uma interface simples.....................................................................14
AJAX.............................................................................................................................................15
O que é, para que serve e quando usar......................................................................................15
Como o ExtJS se comunica com o servidor..............................................................................15
Instalando o servidor Apache....................................................................................................16
Testando o AJAX do ExtJS.......................................................................................................16
Parte Prática 2: Interagindo nossa interface com o servidor.....................................................17
PHP................................................................................................................................................18
Conhecendo o PHP...................................................................................................................18
Instalando o PHP.......................................................................................................................18
Parte Prática 3: Interagindo nossa interface com o servidor.....................................................19
PostgreSQL....................................................................................................................................20
Conhecendo o PostgreSQL.......................................................................................................20
Instalando o PostgreSQL e o PgAdmin.....................................................................................20
Criando nosso Banco de Dados................................................................................................21
Parte Prática 4: Tornando nossa aplicação funcional................................................................21
Extend e Override..........................................................................................................................24
Adaptando o ExtJS as nossas necessidades..............................................................................24
Praticando um pouco mais.............................................................................................................25
Criando mais cadastros em nossa aplicação..............................................................................25
Fim.................................................................................................................................................26
Agradecimentos........................................................................................................................26

JavaScript
Introdução ao JavaScript
JavaScript é uma linguagem de programação que permite a manipulação de objetos de uma
página web diretamente no browser, bem como o acesso a algumas informações importantes como
qual o sistema operacional, qual o browser que está abrindo a página, qual a engine de renderização
do navegador, etc. Permite também o acesso e manipulação de datas, pegar a data e hora do sistema
operacional, formatar ou criar novos objetos de data e hora.
Por ser uma linguagem de programação interpretada pelo browser em tempo de execução o
JavaScript está sujeito a particularidades de cada navegador, um bom exemplo é a diferença que
existe entre a forma de se criar uma requisição AJAX no Internet Explorer e no Firefox.
Internet Explorer
var req = new ActiveXObject(“Microsoft.XMLHTTP”);
Firefox
var 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 página, também permite a
manipulação do JavaScript, HTML e CSS em tempo de execução permitindo testes mais rápidos e
diretamente na página. Analisando por outro lado, essa facilidade que o Firebug disponibiliza é um
ponto fraco para a segurança 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, funções e estrutura
Por ter tido uma colaboração considerável da SUN em sua criação o JavaScript tem a sintaxe
muito semelhante a do Java porém muito diferente em seu conceito e seu uso.
De acordo com seu sistema de tipos JavaScript é:
• Fraca - sua tipagem é mutável;
• Dinâmica - uma variável pode assumir vários tipos diferentes durante a execução;
• Implícita - as variáveis são declaradas sem tipo.
Existem três formas de declaração de variáveis:
• Escopo Global: variavel1 = 'a'; ou window.variavel1 = 'a';
• Escopo Local: var variavel1 = 'a';
• Escopo do Objeto: this.variavel1 = 'a';
Existem duas formas de declaração de funções:
• Escopo Global: function funcao1(){};
• Escopo do Objeto e anônima: var funcao1 = function(){};
Atribuição e tipos de objetos:
• String: var variavel1 = 'string';
• Integer: var variavel1 = 123;
• Float: var variavel1 = 123.5;
• Object: var variavel1 = {};
• Array: var variavel1 = [];
• Boolean: var variavel1 = true;
• Date: var variavel1 = new Date();
• Function: var variavel1 = function(){};
Operadores aritméticos:
• + x + y Soma ou concatena y a x;
• - x – y Subtrai y de x;
• * x * y Multiplica x por y;
• % x % y Retorna o resto da divisão de x por y;
• / x / y Divide x por y;
• ++ x++ Adiciona 1 a x;
• -- x-- Subtrai 1 de y;
Operadores lógicos e relacionais
• ! !bool Inverte o resultado booleano da variável ou expressão;
• && 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, não considera o tipo dos dados;
• != x != y True se x for diferente de y, não 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 atribuídos com inicialização 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 variavel1 = ['JavaScript', 'PHP'];
var variavel2 = variavel1[1];
//variavel2 >> 'PHP'
Exemplo de objeto com dados:
var variavel1 = {nome: 'João', idade: 13};
Exemplo de acesso a um objeto:
var variavel1 = {nome: 'João', idade: 13};
var variavel2 = variavel1.nome;
//variavel2 >> 'João'
//todo objeto pode ser acessado como um array associativo
var variavel2 = variavel1['nome'];
//variavel2 >> 'João'
Um objeto pode conter um array ou outros tipos assim como um array pode conter objetos
ou outros tipos, exemplo:
var variavel1 = [{nome: 'João'}, {nome: 'Jorge'}];
//variavel1[0].nome >> 'João'
//variavel1[0]['nome'] >> 'João'
var variavel1 = {nome: ['João', 'Jorge']};
//variavel1.nome[0] >> 'João'
//variavel1['nome'][0] >> 'João'
Exemplo de objeto complexo:
var variavel1 = {
pessoas: ['João', 'Jorge'],
addPessoa: function(pessoa){
this.pessoas.push(pessoa);
//push adiciona um item a um array
},
removeUltima: function(){
this.pessoas.pop();
//pop remove o último elemento de um array
}
}
variavel1.addPessoa('Rodrigo');
//variavel1.pessoas >> ['João', 'Jorge', 'Rodrigo']
variavel1.removeUltima();
//variavel1.pessoas >> ['João', 'Jorge']

Uma classe em JavaScript é uma função que contém variáveis e funções referenciadas a si,
ou seja, declaradas com this, exemplo:
var classe1 = function(){
this.pessoas = [];
this.addPessoa = function(pessoa){
}
}
var obj1 = new classe1;
obj1.addPessoa('João');
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. Após as alterações no
prototype da classe todos os objetos criados a partir desta serão afetados além dos objetos criados
posteriormente. Tomando como base a classe já criada no exemplo acima, podemos exemplificar
adicionando uma função de contagem de pessoas:
var classe1 = function(){
this.pessoas = [];
this.addPessoa = function(pessoa){
}
}
obj1.addPessoa('João');
//Neste ponto o método quantidadePessoas não existe
//Aqui implementamos este novo método em uma classe já existente
classe1.prototype.quantidadePessoas = function(){
return this.pessoas.length;
}
//A partir daqui podemos utilizá-lo
obj1.quantidadePessoas(); //Deve retornar 1;
obj3.quantidadePessoas(); //Deve retornar 0, pois não foram adicionado dados;
Mas qual a real utilidade do prototype? Se você deseja alterar uma classe que você mesmo
criou porque não alterar diretamente no código da classe, certo? Bom, existem casos onde temos a
necessidade de alterar classes que não criamos, classe de bibliotecas ou até mesmo classes do
próprio JavaScript, um exemplo seria criar a funcionalidade de adicionar uma sequencia de
caracteres a uma string para preenchê-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
Citação de [HTML STAFF] ExtJS: Um excelente framework de Javascript
O ExtJS é um framework Javascript criado originalmente como uma extensão do YUI
(Yahoo! User Interface). Na época de sua criação, chamava-se yui-ext, funcionando junto
ao YUI, que era a base. Por ser uma extensão do YUI, o yui-ext não funcionava sem ele.
O ExtJS é um software de código livre criado por Jack Slocum, disponibilizado sob a
licença LGPL, porém pode ser comprado para vir com uma outra licença não-livre, caso
seja preciso, e também há como adquirir apenas o suporte pago do ExtJS o que dá direito,
além do suporte via fórum, e-mail, telefone e onsite (dependendo do nível de associação), o
acesso ao SVN do ExtJS onde estão as versões de desenvolvimento do ExtJS e as correções
ainda não 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 rápido reconhecimento entre os desenvolvedores como uma extensão 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 várias versões 0.x do yui-ext, antes de
ser lançada a versão 1.0 final onde seu nome foi alterado para EXT JS, demonstrando que
ele já não era apenas uma extensão para o YUI.
A próxima release lançada foi o ExtJS 1.1, sendo que, a partir dessa versão houve um salto
tornando-o um verdadeiro Framework de Javascript ou AJAX Framework e não mais
limitado a ser apenas uma extensão para outros Frameworks, apesar de ainda poder ser
usado assim.
A partir da versão 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.
Após a série 1.1, começou a ser desenvolvido o ExtJS 2.0, trazendo várias funções e
componentes básicos completamente remodelados para trabalhar com mais eficiência e
códigos menores.
Características
O ExtJS, por ser uma biblioteca Javascript cross-browser, provê o desenvolvedor de
ferramentas para criar interfaces para páginas e sistemas web-based com alta
performance, customização e uma aparência 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 licença comercial, além de ser
possível a compra de suporte técnico.

O ExtJS suporta os frameworks Yahoo! User Interface, Prototype e jQuery, através de
adapters (adaptadores). Além disso, trabalha integrado com o Adobe AIR e com Google
Web Toolkit (GWT).
A sua utilização é bastante simples, uma vez que os arquivos necessários à sua utilização
são incluídos na página HTML (ou PHP etc) através das tags <SCRIPT>, tal como a
inclusão que qualquer arquivo *.js.
A documentação também é farta, existindo uma ativa comunidade de utilizadores no Brasil,
além da comunidade Norte-Americana.
A própria documentação do ExtJS (inglês) é fácil de entender e bastante dinâmica, bem
como apresenta diversos exemplos de suas funcionalidades. Veja uma imagem da API de
documentação:
Existem ainda algumas ferramentas para criação visual de componentes, tais como
formulários, todas disponíveis gratuitamente, além de plugins para algumas IDEs (Aptana,
por exemplo).
Conclusão
Como se pode ver nas seções anteriores, o ExtJS facilita e muito o desenvolvimento web,
seja porque provê ao desenvolvedor de ferramentas poderosas para criação de interfaces
elegantes, funcionais e eficientes; seja porque retira do desenvolvedor a preocupação com a
elaboração visual, que às vezes não é tão 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
endereços eletrônicos:
• Site oficial do ExtJS;
• Site da comunidade de utilizadores brasileiros do ExtJS;
• Exemplos do site official
• Documentação
• Blog RKN
No momento em que escrevo esta apostila a versão atual da biblioteca do ExtJS é 3.2.0.

Instalando o ExtJS e testando
Instalando:
1. Entre na área de download do site do ExtJS e faça a download da versão 3.2.0 da biblioteca,
ela virá compactada;
2. Dentro do pacote ZIP existe uma pasta chamada ext-3.2.0, extraia-a para uma pasta em seu
computador, se você tiver um servidor web instalado aproveite para colocá-la dentro da
pasta do seu servidor;
Testando:
1. Crie um arquivo chamado index.html na mesma pasta que contém a pasta ext-3.2.0;
2. Crie um arquivo chamado index.js, sua estrutura deve estar parecida com essa:
| – suaPasta
| – ext-3.2.0
| – index.html
| – index.js
3. Abra o arquivo index.html e escreva o seguinte código:
<html>
<head>
<title>Testando o ExtJS</title>
<link rel="stylesheet" href="ext-3.2.0/resources/css/ext-all.css" type="text/css" />
<script src="ext-3.2.0/adapter/ext/ext-base.js"></script>
<script src="ext-3.2.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 código:
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 título “Teste” e conteúdo “Minha primeira janela em ExtJS”, caso isso não ocorra
revise seus códigos.

Explicações:
1. Carregamos 3 arquivos do ExtJS:
a) ext-all.css – contém os estilos que fazem a ligação do HTML gerado pelo ExtJS com a
“Skin”, a qual contém inúmeras linhas de estilos e ligações com imagens;
b) ext-all.js – contém o código de todos os componentes visuais e não visuais da biblioteca;
c) ext-base.js – o ExtJS pode funcionar ligado a essa biblioteca ou a outras como JQuery
através de adaptadores que são outros arquivos .js.
2. Carregamos o arquivo index,js onde colocaremos nosso código JavaScript, essa divisão de
arquivos torna o código mais organizado.
3. Dentro do index.js:
a) “Ext.onReady” recebe uma função por parâmetro, quando passamos uma função por
parâmetro chamamos de callback porque ela será executada por outro pedaço de código
que não possui conhecimento desta função, essa função será executada logo após o
carregamento de todos os elementos de nossa página, evitando problemas. Sendo assim,
dentro desta função “anonima” começamos a escrever o código que queremos que seja
executado ao abrir a página;
b) Criamos para uma variável chamada “win” um componente chamado Ext.Window
(janela) com largura de 300px, altura de 200px, titulo e um pequeno texto;
c) A partir do objeto criado para a variável “win” chamamos o método “show” o qual faz a
nossa janela ser renderizada na tela para o usuário, como não passamos posição ela será
renderizada exatamente no centro da tela;
d) “Ext.get()”. Lembra do “document.getElementById()”? Pois é, podemos compará-lo a
ele, com uma pequena diferença, Ext.get nos traz um elemento pelo id que ele contém
na sua tag HTML mas como um objeto do ExtJS, você pode notar que com o Ext.get o
objeto retornado contém todas as propriedades e métodos do objeto Ext.Element, olhe
na documentação, 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 botão de id
“btClose”. Em um Ext.Element, que é o que o Ext.get nos retorna, podemos usar do
método “on” que recebe três parâmetros, o nome do evento a se associar, a função de
callback que queremos executar quando esse evento ocorrer e o escopo, o escopo é um
parâmetro opcional e trataremos dele mais tarde. Em resumo, associamos uma função ao
evento click do botão que pega a variável onde temos a janela e executa o método de
fechar (close).

Obs: É muito importante manter um código bem identado, isso facilita a vida de quem fez o
código, de quem vai ler e do professor deste curso :) se possível use um editor de texto que lhe
ajude a programar, principalmente um que contenha syntax highlight. Se não tiver um favorito
tente o Notepad++.
Ótimo, agora que sabemos como iniciar a utilização do ExtJS vamos começar com os exercícios:
1. Vamos praticar um pouco mais de “Ext.get”, temos em nosso código acima um exemplo de
como fechar a janela no click de um botão. Crie mais um botão, não esqueça de colocar um
id único para ele, e faça com que nossa janela abra somente quando este botão for clicado.
Obs: coloque todo o código de criação da janela dentro do evento do botão e declare a
variável fora dos eventos.
2. Vamos praticar um pouco de lógica. Os mais curiosos provavelmente perceberam que a cada
vez que se clica no botão de criar a janela é criada uma nova janela, isso acontece porque a
cada clique executamos nosso código de criação sem antes verificar se a janela já existe,
sendo assim criamos uma nova janela para a mesma variável e a antiga continua lá, assim
perdemos a referencia das janelas anteriores pela variável “win”, note que ao clicar no botão
de fechar a janela somente a última janela se fecha. Faça uma estrutura básica de condição,
um IF antes da criação da janela e verifique se a mesma ainda não foi criada para poder dar
continuidade ao código. Exemplo de IF onde o alert será mostrado somente se a variável for
um vazia, null:
//Será disparado o alert
var objeto = null;
if(objeto === null){
alert('Objeto não criado');
}
//Não será disparado o alert
var objeto = new Date();
if(objeto === null){
alert('Objeto não criado');
}
3. Você deve ter notado que ao fechar a janela não conseguimos mais abri-la, isso se deve ao
fato de fecharmos a janela e não liberarmos a variável, adicione após o close() da janela o
código win = null; para que ela passe em nosso teste de criação;
4. Altere as configurações da janela para que ela não possua o botão de fechar, que ela não
possa ser redimensionada e que ela contenha um barra de status na parte inferior com um
botão 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:
height: 200,
width: 300,
items:[new Ext.Panel({
title: 'Titulo',
html: 'texto'
})]
})
win.show();
height: 200,
width: 300,
items:[{
xtype: 'panel',
title: 'Titulo',
html: 'texto'
}]
})
win.show();
Exemplo de janela com formulário e 3 campos, onde o campo nome não pode ser nulo:
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();
Exercícios
5. Pegando o exemplo de formulário acima, faça com que o campo Sobrenome não permita
ficar vazio e adicione os seguintes campos:
1. Endereço (campo texto);
2. Data Cadastro (campo data, não pode ser vazio);
3. Profissão (Campo texto).

Exemplo de grid com dados:
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: 'Profissão',
width: 100,
sortable: true,
dataIndex: 'profissao'
},{
id: 'idade',
header: 'Idade',
width: 50,
sortable: true,
dataIndex: 'idade'
}
]
}]
})
win.show();
Exercícios
6. Pegando o exemplo de grid acima, adicione o campo Sobrenome no store, coloque dados
para esse campo, faça com que ele apareça no grid e faça com que este campo não possa ser
ordenado.

Parte Prática 1: Montando uma interface simples
Criar uma interface simples:
1. Criar um Viewport de layout border, contendo as regiões north, east, center e south;
2. Criar uma toolbar na região norte contendo os botões:
1. Cadastro (com submenu)
• Pessoas (Deve abrir a Aba de Cadastro Pessoas)
• Cidades (Sem funcionalidade por enquanto)
2. Teste (um botão toggle sem funcionalidade)
3. Um texto de boas vindas ao usuário
4. Sair (um botão sem funcionalidade alinhado a direita)
3. A região east deve ter o título “Propagandas”, largura de 100px e poder ser minimizada
(collapse);
4. A região south de ter altura de 100px, o título “Noticias”, poder ser minimizada, vir
minimizada por padrão, ser redimensionável e ter o modo de collapsed como “mini”;
5. A região center deve ser um tabPanel;
6. Criar uma tab na região central com título “Olá Mundo” e que fique ativa por padrão
7. Ao clicar no botão “Cadastro > Pessoas” criar uma nova tab na região central contendo um
grid conforme a figura abaixo.
8. O grid deve conter as colunas Nome, Idade e Profissão;
9. Para maiores detalhes comparem a figura abaixo com a sua tela.

AJAX
O que é, para que serve e quando usar.
Citação de Wikipédia: AJAX (programação):
AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso
metodológico de tecnologias como Javascript e XML, providas por navegadores, para
tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações
assíncronas de informações. AJAX não é somente um novo modelo, é também uma iniciativa
na construção de aplicações Web mais dinâmicas e criativas. AJAX não é uma tecnologia —
são realmente várias 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 página WEB, tornando assim possível a separação perfeita de uma aplicação 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 utilização 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 página, evitando assim também o tempo de espera no carregamento de uma
página. A sua utilização não é recomendada para tráfego de informações importantes, como dados
de login.
Importante, AJAX é uma requisição assíncrona, ou seja, o código continua a ser executado
enquanto a requisição está em andamento, o código não espera pela resposta do servidor, por isso
trabalhamos com funções de callback, uma função anonima passada para a requisição, esta função
será chamada ao termino da requisição e receberá por parâmetro os dados da requisição 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 não visual chamado Ext.Ajax a qual nos permite criar
requisições AJAX de forma fácil e clara, vários componentes do ExtJS se utilizam deste
componente para realizar transações AJAX de maneira mais abstrata ao programador como os
Stores, a propriedade autoLoad e o método load do componente Ext.Panel e seus derivados.
A comunicação em AJAX ocorre basicamente da seguinte forma:
1. É enviada uma requisição ao servidor, igualmente ao ato de abrir uma página, onde
podem ser passados dados por POST ou GET, igual ao envio de um formulário da
maneira tradicional;
2. Ocorre o processamento dos dados do lado servidor caso seja chamada uma página
que contenha programação do lado servidor;
3. É retornado todo o código que seria impresso na tela para o usuário caso abríssemos
a página diretamente pelo navegador.
Ou seja, se requisitarmos um arquivo texto, teremos o retorno exato do conteúdo deste
arquivo, se requisitarmos um arquivo PHP teremos o retorno deste arquivo processado como se
abríssemos este arquivo pelo navegador. Sendo assim, nosso retorno é um texto puro, podendo ele
conter HTML ou não.
No ExtJS podemos dizer que a forma de trabalharmos com AJAX é um pouco diferente,

podemos criar uma requisição AJAX na mão e trabalharmos com o retorno dela de forma normal,
porém quando usamos de componentes que fazem este acesso por nós ficamos sujeitos a algumas
convenções. Em geral ao criarmos uma requisição 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 instalação do servidor Apache é simples e se resume no seguinte:
1. Baixar a ultima versão do arquivo binário Win32 sem OpenSSL (MSI Installer) no
site do Apache;
2. Executar o instalador;
3. Na primeira tela basta clicar no botão Next;
4. Nesta tela temos que aceitar os termos da licença, 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 configurações do nosso servidor, para questão
de teste coloque dados ficticíos 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 opção Typical para fazer a instalação padrão e clique em Next;
8. Nesta tela selecione a pasta de instalação, recomendo deixar a pasta padrão e clique
em Next;
9. Nesta tela clique em Install e aguarde a instalação.
10. Irá abrir uma tela de instalação 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!, parabéns você é o mais novo proprietário do seu próprio servidor WEB.
A pasta padrão do servidor Apache onde devem ficar os arquivos do seu site é uma pasta
chamada htdocs, esta pasta fica dentro da pasta de instalação do servidor apache. Caso você queira
trocar esta pasta para um caminho mais amigável 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 instalação do
apache e trocar as duas ocorrências do caminho padrão 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 comunicação de dados entre cliente e servidor, por isso só
podemos utiliza-lo em arquivos que estejam rodando através 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 através do
servidor verifique se o inicio da URL em seu navegador consiste em http://localhost/.
Exemplo 1: AJAX e manipulação 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 código:
Ext.Ajax.request({
url:'noticia.txt',
success:function(r){
alert(r.responseText)
}
})
3. Crie um arquivo chamado noticia.txt e coloque o seguinte conteúdo:
Notícia carregada por AJAX. Forma interessante de se trabalhar.
Exemplo 2: AJAX e carregamento de conteúdo de forma simplificada:
1. Crie os arquivos html e js como de costume;
2. Dentro do Ext.onReady do arquivo js coloque o seguinte código:
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 conteúdo:
Notícia carregada por AJAX.<br/>Forma interessante de se trabalhar.
Exercícios
7. Pegando o exercício 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 não serão carregados, temos que dizer ao store para carrega-los e para
isso há duas formas, colocar autoLoad:true como configuração do store, ou depois de cria-lo
pegar sua referencia e executar o método laod (meuStore.load()). Como não temos
referencia do store e nem um id para o mesmo temos de usar a opção autoLoad:true que faz
com que os dados sejam carregados assim que o store for criado.
Parte Prática 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. Faça com que possam ser inseridos dados nos grids através de
formulários, analise, estude a escolha um dos métodos usados no arquivo pratica1.1.js. Crie novos
cadastros para praticar um pouco mais. E faça 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
Citação de Wikipédia: PHP:
PHP (um acrónimo recursivo para "PHP: Hypertext Preprocessor") é uma
linguagem de programação de computadores interpretada, livre e muito utilizada para
gerar conteúdo dinâmico na World Wide Web, como por exemplo a Wikipédia.
A linguagem PHP é uma linguagem de programação de domínio específico, ou seja,
seu escopo se estende a um campo de atuação que é o desenvolvimento web, embora tenha
variantes como o PHP-GTK. Seu propósito principal é de implementar soluções web
velozes, simples e eficientes.
Características:
• Velocidade e robustez
• Estruturado e orientação a objeto
• Portabilidade - independência 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 código como o conteúdo de um IF por exemplo, temos variáveis com
tipagem entre outras coisas. O PHP nos permite manipular os dados no lado servidor de nossa
aplicação 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 usuário verá se acessar a pagina .php ou o que receberemos por AJAX se
requisitarmos esta página .php.
Instalando o PHP
A instalação do PHP é ainda mais fácil que a instalação 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 licença e clique em Next;
5. Na terceira tela, “Destination Folder”, selecione o caminho de instalação ou deixe o
padrão e clique em Next;
6. Na quarta tela, “Web Server Setup”, selecione a opção “Apache 2.2.x Module” para
que o PHP configure o Apache para nós e clique em Next;
7. Na quinta tela, “Apache Configuration Directory”, selecione a pasta de configuração
do Apache que é a pasta conf dentro da pasta de instalação 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 extensões que queremos instalar junto
ao PHP, verifique se a extensão PostgreSQL está selecionada, se não estiver
selecione-a clicando no icone ao lado do nome e clicando na primeira opção da lista.
Caso deseje usar outro banco como o MySQL faça a ativação da extensão para o
banco desejado e clique em Next;
9. Na sétima tela, “Ready to install PHP ...”, clique em Install e aguarde o término do
processo de instalação;
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 através do localhost e veja se apareceu o relatório das
configurações do PHP.
Parte Prática 3: Interagindo nossa interface com o servidor
Troque nossos arquivos .txt que contém nossos dados em formato JSON por arquivos .php e
crie neles a estrutura de dados como exemplificado abaixo.
Exemplo de impressão 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
Citação de Wikipédia: PostgreSQL:
Hoje, o PostgreSQL é um dos SGBDs (Sistema Gerenciador de Bancos de Dados) de código
aberto mais avançados, contando com recursos como:
• consultas complexas
• chaves estrangeiras
• integridade transacional
• controle de concorrência multi-versão
• suporte ao modelo híbrido objeto-relacional
• gatilhos
• visões
• Linguagem Procedural em várias linguagens (PL/pgSQL, PL/Python, PL/Java,
PL/Perl) para procedimentos armazenagem
• Indexação por texto
• Estrutura para guardar dados Georeferenciados PostGIS
Instalando o PostgreSQL e o PgAdmin
Vamos instalar o PostgreSQL:
1. Baixe a última versão do instalador do PostgreSQL para windows aqui, baixe o “the
one click installer”;
2. Execute o instalador e aguarde o início da tela de configurações;
3. Na primeira tela, “Setup – PostgreSQL”, clique em Next;
4. Na segunda tela, “Installation Directory”, selecione um diretório de instalação ou
deixe o padrão e cliqe em Next;
5. Na terceira tela, “Data Directory”, selecione o diretório que conterá os arquivos dos
bancos de dados do PostgreSQL ou deixe o padrão e clique em Next;
6. Na quarta tela, “Password”, informe uma senha para o super-usuário (postgres) do
banco, será criado um usuário 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 serviço de banco de dados
do PostgreSQL ou deixe a porta padrão 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 sétima tela, “Ready to Install”, clique em Next e aguarde a instalação terminar;
10. Na oitava tela, “Completing the PostgreSQL Setup Wizard”, desmarque a opção
“Launch Stack Builder at Exit” e clique em Finish;
11. Procure no menu iniciar pelo diretório 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 usuário postgres;
13. Estamos prontos para começar 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 codificação “UTF8”;
3. Conecte no banco “extjs” recém 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 Prática 4: Tornando nossa aplicação funcional
1. SELECT: Altere nossos arquivos .php para que ele busque as informações 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'; //Usuário
$pw = 'postgres'; //Senha
//Tenta conectar e passar a referencia para $db, se não for possível
//ele termina a execução 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 ação estamos requisitando, agora teremos duas ações
(SELECT e INSERT) e no arquivo JS precisamos enviar as informações do formulário para
o PHP e também precisamos enviar qual a ação que queremos realizar.
• JS: O FormPanel possui um método interno pra enviar os dados por ajax para o
servidor, é o método submit do formulário interno que também possui o método isValid
que verifica se todos os campos estão corretos de acordo com suas validações.
Observação importante, cada campo do formulário 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(){
//Código a ser executado ao termino do AJAX
//Como recarregar um grid por exemplo;
}
})
}else{
alert('campos inválidos');
}
• PHP: Antes tínhamos apenas uma ação para o arquivo PHP em questão 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 ação o lado
cliente está requisitando, para isso passamos um parâmetro por POST ao arquivo
informando qual a ação a ser executada e dentro do código PHP podemos fazer um IF e
separa os blocos de ação. O código abaixo não substitui o código já criado no arquivo
PHP, é apenas um exemplo de como implementar a condição da ação 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 código a ser executado case não seja ação 'insert'
//Como o select por exemplo;
}
3. DELETE: Para implementarmos a deleção precisamos alterar os dois lados da aplicação.

• JS: Precisamos adicionar o campo ID no nosso store para que possamos envia-lo ao PHP
para identificar qual registro queremos excluir, esta alteração não exemplificarei aqui
pois é simples, e precisamos adicionar um botão em nossa tela, na TBAR por exemplo, e
definir em seu HANDLER um requisição ajax enviando a ação quer queremos realizar e
o ID do registro a ser excluído. 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 ação:
if($_POST['acao']=='insert'){
//Código da ação de insert
}if($_POST['acao']=='delete'){
$id = $_POST['id'];
$result = pg_query($db, "DELETE FROM pessoas WHERE id = $id");
}else{
//Código da ação de select
}
4. UPDATE: Essa é uma ação complicada, ela se resume em pegar a linha selecionada no grid,
carregar estes dados para um formulário de forma que o usuário possa editar as informações
e envia-las por submit com a ação de update.
• JS: Crie um botão para a alteração, copie o handler do botão de adicionar, coloque um
IF em torno deste código verificando se existe uma linha selecionada no grid, adicione
um campo a mais no formulário 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 formulário (os campos devem ter os mesmos nomes dos
campos do store) e no handler do botão de salvar altere a ação para update:
//código 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 código:
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 são formas de modificar e adicionar classes da biblioteca ExtJS,
ambos são funções internas da biblioteca.
1. Extend: Esta função nos permite estender uma classe já existente adicionando novas
propriedades, métodos, eventos e valores padrão. Um bom e simples exemplo seria estender
a classe Window para uma classe chamada MyWindow e adicionar a ela altura e largura
padrão:
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 função nos permite adicionar funcionalidades a uma classe já existente sem
que seja necessária a criação de uma nova classe. Um bom exemplo seria adicionar um
método a classe Ext.data.Store que nos permita adicionar registros mais facilmente como
demonstrado no código abaixo, um exemplo mais complexo e de grande utilidade é um
override que nos permite adicionar colunas em um formulário de forma fácil 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()));
//Após o override podemos proceder assim:
//store.insertRecord(form.getForm().getValues());

Praticando um pouco mais
Criando mais cadastros em nossa aplicação
Esta parte está destinada a última aula deste curso e consiste em criar novos cadastros para
praticarmos um pouco mais, esta criação de novos cadastros envolve criação de tabelas no banco de
dados, criação dos arquivos PHP necessários e adição dos códigos JavaScript necessários.
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 criação de um
cadastro de estados fazendo as alterações na tabela e tela do cadastro de cidades para efetuar a
ligação entre ambos e que o usuário possa selecionar em um combobox o estado da cidade.
E por fim aconselho a todos soltar a imaginação, estudar os exemplos e a documentação 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 Informação Marcelo
Azambuja.
Abraços a todos.

Apostila de ext js com php e postgresql v1.0

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Apostila de ext js com php e postgresql v1.0 (20)

Mais de Luciano Marwell (6)

Último (12)

Apostila de ext js com php e postgresql v1.0