Apostila de ExtJS com PHP e PostgreSQL v1.0

Prévia do material em texto

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){
this.pessoas.push(pessoa);
}
}
var obj1 = new classe1;
var obj2 = 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){
this.pessoas.push(pessoa);
}
}
var obj1 = new classe1;
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;
var obj3 = new classe1;
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:
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 formulário e 3 campos, onde o campo nome não 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();
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:
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: '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 interessantede 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:
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 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 dadosde 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 cadastrospara 
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.
	JavaScript 
	Introdução ao JavaScript
	Conhecendo e instalando o Firebug
	Formato de dados, funções e estrutura
	ExtJS
	Conhecendo o ExtJS
	Instalando o ExtJS e testando
	Parte Prática 1: Montando uma interface simples
	AJAX
	O que é, para que serve e quando usar.
	Como o ExtJS se comunica com o servidor
	Instalando o servidor Apache
	Testando o AJAX do ExtJS
	Parte Prática 2: Interagindo nossa interface com o servidor
	PHP
	Conhecendo o PHP
	Instalando o PHP
	Parte Prática 3: Interagindo nossa interface com o servidor
	PostgreSQL
	Conhecendo o PostgreSQL
	Instalando o PostgreSQL e o PgAdmin
	Criando nosso Banco de Dados
	Parte Prática 4: Tornando nossa aplicação funcional
	Extend e Override
	Adaptando o ExtJS as nossas necessidades
	Praticando um pouco mais
	Criando mais cadastros em nossa aplicação
	Fim
	Agradecimentos