Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila de ExtJS Com PHP e PostgreSQL v1.2
Apostila de ExtJS Com PHP e PostgreSQL v1.2
Rodrigo K. Nascimento
rodrigoknascimento@gmail.com
http://www.rkn.com.br
FACCAT
Atualizado em 8 de Maio de 2010
Esta apostila tem por objetivo demonstrar os principais componentes e funes da biblioteca
JavaScript ExtJS. Como auxlio para a demonstrao de uma aplicao simples porm funcional,
ser usada a linguagem de programao PHP para a comunicao da interface (ExtJS) com o
servidor e o banco de dados PostgreSQL. Para melhor compreenso esta apostila est dividida da
seguinte forma:
Sumrio
JavaScript ........................................................................................................................................3
Introduo ao JavaScript.............................................................................................................3
Conhecendo e instalando o Firebug............................................................................................4
Formato de dados, funes e estrutura........................................................................................4
ExtJS................................................................................................................................................7
Conhecendo o ExtJS...................................................................................................................7
Instalando o ExtJS e testando......................................................................................................9
Traduzindo o ExtJS...................................................................................................................12
XType........................................................................................................................................12
Parte Prtica 1: Montando uma interface simples.....................................................................14
AJAX.............................................................................................................................................16
O que , para que serve e quando usar......................................................................................16
Como o ExtJS se comunica com o servidor..............................................................................17
Instalando o servidor Apache....................................................................................................17
Testando o AJAX do ExtJS.......................................................................................................18
Parte Prtica 2: Interagindo nossa interface com o servidor.....................................................19
PHP................................................................................................................................................19
Conhecendo o PHP...................................................................................................................19
Instalando o PHP.......................................................................................................................20
Parte Prtica 3: Interagindo nossa interface com o servidor.....................................................20
PostgreSQL....................................................................................................................................21
Conhecendo o PostgreSQL.......................................................................................................21
Instalando o PostgreSQL e o PgAdmin.....................................................................................21
Criando nosso Banco de Dados................................................................................................22
Parte Prtica 4: Tornando nossa aplicao funcional................................................................22
Extend e Override..........................................................................................................................25
Adaptando o ExtJS as nossas necessidades..............................................................................25
Praticando um pouco mais.............................................................................................................26
Criando mais cadastros em nossa aplicao..............................................................................26
Fim.................................................................................................................................................27
Agradecimentos........................................................................................................................27
JavaScript
Introduo ao JavaScript
JavaScript uma linguagem de programao que permite a manipulao de objetos de uma
pgina web diretamente no browser, bem como o acesso a algumas informaes importantes como
qual o sistema operacional, qual o browser que est abrindo a pgina, qual a engine de renderizao
do navegador, etc. Permite tambm o acesso e manipulao de datas, pegar a data e hora do sistema
operacional, formatar ou criar novos objetos de data e hora.
Por ser uma linguagem de programao interpretada pelo browser em tempo de execuo o
JavaScript est sujeito a particularidades de cada navegador, um bom exemplo a diferena que
existe entre a forma de se criar uma requisio AJAX no Internet Explorer e no Firefox.
Internet Explorer
var req = new ActiveXObject(Microsoft.XMLHTTP);
Firefox
var req = new XMLHttpRequest();
Soma ou concatena y a x;
Subtrai y de x;
Multiplica x por y;
Retorna o resto da diviso de x por y;
Divide x por y;
Adiciona 1 a x;
Subtrai 1 de y;
Um objeto vazio representado por {} e um array vazio representado por [], sendo que
esses podem ser atribudos com inicializao de um objeto do respectivo tipo. Um array ou um
objeto podem conter dados de um ou mais tipos.
Exemplo de array com dados:
var variavel1 = ['valor1', 'valor2', 'valor3'];
var variavel1 = [0, 1, 2];
var variavel1 = ['valor1', 0, true];
Exemplo de acesso a um array:
var variavel1 = ['JavaScript', 'PHP'];
var variavel2 = variavel1[1];
//variavel2 >> 'PHP'
Exemplo de objeto com dados:
var variavel1 = {nome: 'Joo', idade: 13};
Exemplo de acesso a um objeto:
var variavel1 = {nome: 'Joo', idade: 13};
var variavel2 = variavel1.nome;
//variavel2 >> 'Joo'
//todo objeto pode ser acessado como um array associativo
var variavel2 = variavel1['nome'];
//variavel2 >> 'Joo'
Um objeto pode conter um array ou outros tipos assim como um array pode conter objetos
ou outros tipos, exemplo:
var variavel1 = [{nome: 'Joo'}, {nome: 'Jorge'}];
//variavel1[0].nome >> 'Joo'
//variavel1[0]['nome'] >> 'Joo'
var variavel1 = {nome: ['Joo', 'Jorge']};
//variavel1.nome[0] >> 'Joo'
//variavel1['nome'][0] >> 'Joo'
Exemplo de objeto complexo:
var variavel1 = {
pessoas: ['Joo', '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 >> ['Joo', 'Jorge', 'Rodrigo']
variavel1.removeUltima();
//variavel1.pessoas >> ['Joo', 'Jorge']
Uma classe em JavaScript uma funo que contm variveis e funes 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('Joo');
obj2.addPessoa('Jorge');
Javascript possui um recurso chamado prototype, que permite modificar uma classe depois
que ela foi criada. Permite inclusive alterar classes internas da linguagem. Aps as alteraes no
prototype da classe todos os objetos criados a partir desta sero afetados alm dos objetos criados
posteriormente. Tomando como base a classe j criada no exemplo acima, podemos exemplificar
adicionando uma funo de contagem de pessoas:
var classe1 = function(){
this.pessoas = [];
this.addPessoa = function(pessoa){
this.pessoas.push(pessoa);
}
}
var obj1 = new classe1;
obj1.addPessoa('Joo');
//Neste ponto o mtodo quantidadePessoas no existe
//Aqui implementamos este novo mtodo 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 no foram adicionado dados;
Mas qual a real utilidade do prototype? Se voc deseja alterar uma classe que voc mesmo
criou porque no alterar diretamente no cdigo da classe, certo? Bom, existem casos onde temos a
necessidade de alterar classes que no criamos, classe de bibliotecas ou at mesmo classes do
prprio JavaScript, um exemplo seria criar a funcionalidade de adicionar uma sequencia de
caracteres a uma string para 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
Citao de [HTML STAFF] ExtJS: Um excelente framework de Javascript
O ExtJS um framework Javascript criado originalmente como uma extenso do YUI
(Yahoo! User Interface). Na poca de sua criao, chamava-se yui-ext, funcionando junto
ao YUI, que era a base. Por ser uma extenso do YUI, o yui-ext no funcionava sem ele.
O ExtJS um software de cdigo livre criado por Jack Slocum, disponibilizado sob a
licena LGPL, porm pode ser comprado para vir com uma outra licena no-livre, caso
seja preciso, e tambm h como adquirir apenas o suporte pago do ExtJS o que d direito,
alm do suporte via frum, e-mail, telefone e onsite (dependendo do nvel de associao), o
acesso ao SVN do ExtJS onde esto as verses de desenvolvimento do ExtJS e as correes
ainda no liberadas publicamente.
Com o desenvolvimento do yui-ext, foram sendo incorporados diversos adapters
(adaptadores), que funcionavam de ponte entre o yui-ext e outros Frameworks de
Javascript: o Prototype e jQuery.
Com o crescente e rpido reconhecimento entre os desenvolvedores como uma extenso rica
em funcionalidades e componentes de interface acrescentando valor aos mais conhecidos
Frameworks de Javascript (YUI, Prototype e jQuery), o seu desenvolvimento foi ganhando
em colaboradores e velocidade. Assim, sucederam-se vrias verses 0.x do yui-ext, antes de
ser lanada a verso 1.0 final onde seu nome foi alterado para EXT JS, demonstrando que
ele j no era apenas uma extenso para o YUI.
A prxima release lanada foi o ExtJS 1.1, sendo que, a partir dessa verso houve um salto
tornando-o um verdadeiro Framework de Javascript ou AJAX Framework e no mais
limitado a ser apenas uma extenso para outros Frameworks, apesar de ainda poder ser
usado assim.
A partir da verso 1.1.1 o ExtJS passou a ser oficialmente suportado pelos navegadores
Microsoft Internet Explorer 6+, Mozilla Firefox 1.5+, Apple Safari 2+ e Opera 9+ e extraoficialmente com o Konqueror, Galeon, Ice Weasel, Mozilla, Netscape e provavelmente
outros.
Aps a srie 1.1, comeou a ser desenvolvido o ExtJS 2.0, trazendo vrias funes e
componentes bsicos completamente remodelados para trabalhar com mais eficincia e
cdigos menores.
Caractersticas
O ExtJS, por ser uma biblioteca Javascript cross-browser, prov o desenvolvedor de
ferramentas para criar interfaces para pginas e sistemas web-based com alta
performance, customizao e uma aparncia elegante.
Atualmente o ExtJS suportado oficialmente pelos navegadores Internet Explorer 6+,
FireFox 1.5+ (PC, Mac), Safari 3+ e Opera 9+ (PC, Mac).
Pode ser utilizado sob a GPL ou pode-se adquirir uma licena comercial, alm de ser
possvel a compra de suporte tcnico.
Explicaes:
1. Carregamos 3 arquivos do ExtJS:
a) ext-all.css contm os estilos que fazem a ligao do HTML gerado pelo ExtJS com a
Skin, a qual contm inmeras linhas de estilos e ligaes com imagens;
b) ext-all.js contm o cdigo de todos os componentes visuais e no visuais da biblioteca;
c) ext-base.js o ExtJS pode funcionar ligado a essa biblioteca ou a outras como JQuery
atravs de adaptadores que so outros arquivos .js.
2. Carregamos o arquivo index,js onde colocaremos nosso cdigo JavaScript, essa diviso de
arquivos torna o cdigo mais organizado.
3. Dentro do index.js:
a) Ext.onReady recebe uma funo por parmetro, quando passamos uma funo por
parmetro chamamos de callback porque ela ser executada por outro pedao de cdigo
que no possui conhecimento desta funo, essa funo ser executada logo aps o
carregamento de todos os elementos de nossa pgina, evitando problemas. Sendo assim,
dentro desta funo anonima comeamos a escrever o cdigo que queremos que seja
executado ao abrir a pgina;
b) Criamos para uma varivel 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 varivel win chamamos o mtodo show o qual faz a
nossa janela ser renderizada na tela para o usurio, como no passamos posio ela ser
renderizada exatamente no centro da tela;
d) Ext.get(). Lembra do document.getElementById()? Pois , podemos compar-lo a
ele, com uma pequena diferena, Ext.get nos traz um elemento pelo id que ele contm
na sua tag HTML mas como um objeto do ExtJS, voc pode notar que com o Ext.get o
objeto retornado contm todas as propriedades e mtodos do objeto Ext.Element, olhe
na documentao, e a propriedade Ext.get('idElemento').dom nos retorna o que o
document.getElementById() nos retornaria. Sendo assim com o Ext.get podemos
usar de eventos facilmente, como neste caso associando um evento ao boto de id
btClose. Em um Ext.Element, que o que o Ext.get nos retorna, podemos usar do
mtodo on que recebe trs parmetros, o nome do evento a se associar, a funo de
callback que queremos executar quando esse evento ocorrer e o escopo, o escopo um
parmetro opcional e trataremos dele mais tarde. Em resumo, associamos uma funo ao
evento click do boto que pega a varivel onde temos a janela e executa o mtodo de
fechar (close).
Obs: muito importante manter um cdigo bem identado, isso facilita a vida de quem fez o
cdigo, de quem vai ler e do professor deste curso :) se possvel use um editor de texto que lhe
ajude a programar, principalmente um que contenha syntax highlight. Se no tiver um favorito
tente o Notepad++.
timo, agora que sabemos como iniciar a utilizao do ExtJS vamos comear com os exerccios:
1. Vamos praticar um pouco mais de Ext.get, temos em nosso cdigo acima um exemplo de
como fechar a janela no click de um boto. Crie mais um boto, no esquea de colocar um
id nico para ele, e faa com que nossa janela abra somente quando este boto for clicado.
Obs: coloque todo o cdigo de criao da janela dentro do evento do boto e declare a
varivel fora dos eventos.
2. Vamos praticar um pouco de lgica. Os mais curiosos provavelmente perceberam que a cada
vez que se clica no boto de criar a janela criada uma nova janela, isso acontece porque a
cada clique executamos nosso cdigo de criao sem antes verificar se a janela j existe,
sendo assim criamos uma nova janela para a mesma varivel e a antiga continua l, assim
perdemos a referencia das janelas anteriores pela varivel win, note que ao clicar no boto
de fechar a janela somente a ltima janela se fecha. Faa uma estrutura bsica de condio,
um IF antes da criao da janela e verifique se a mesma ainda no foi criada para poder dar
continuidade ao cdigo. Exemplo de IF onde o alert ser mostrado somente se a varivel for
um vazia, null:
//Ser disparado o alert
var objeto = null;
if(objeto === null){
alert('Objeto no criado');
}
//No ser disparado o alert
var objeto = new Date();
if(objeto === null){
alert('Objeto no criado');
}
3. Voc deve ter notado que ao fechar a janela no conseguimos mais abri-la, isso se deve ao
fato de fecharmos a janela e no liberarmos a varivel, adicione aps o close() da janela o
cdigo win = null; para que ela passe em nosso teste de criao;
4. Altere as configuraes da janela para que ela no possua o boto de fechar, que ela no
possa ser redimensionada e que ela contenha um barra de status na parte inferior com um
boto alinhado a direita escrito Fechar e que ao ser clicado feche a janela.
Traduzindo o ExtJS
extremamente fcil traduzir o ExtJS para sua lngua, ele suporta at o momento cerca de
45 lnguas alm da padro que o ingls e para isso basta adicionar mais um arquivo JavaScript
(ext-3.2.0/src/locale/ext-lang-pt_BR.js) na pgina principal da aplicao e pronto. Esse
procedimento ir traduzir o calendrio, o formato das datas e alguns outros textos padres como os
botes SIM e NO do Ext.Msg.cofirm que um dialogo de confirmao. Este arquivo deve ser
includo aps a incluso das libs do ExtJS e antes da incluso no nosso arquivo index.js.
<script src="ext-3.2.0/ext-all.js"></script>
<script src="ext-3.2.0/src/locale/ext-lang-pt_BR.js"></script>
<script src="index.js"></script>
XType
O XType uma forma abreviada de se criar um componente dentro de outro no ExtJS, os
dois exemplos abaixo tem o mesmo efeito:
var win = new Ext.Window({
height: 200,
width: 300,
items:[new Ext.Panel({
title: 'Titulo',
html: 'texto'
})]
})
win.show();
var win = new Ext.Window({
height: 200,
width: 300,
items:[{
xtype: 'panel',
title: 'Titulo',
html: 'texto'
}]
})
win.show();
Exemplo de janela com formulrio e 3 campos, onde o campo nome no pode ser nulo:
var win = new Ext.Window({
height: 200,
width: 300,
layout: 'fit',
items:[{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Nome',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Sobrenome',
width: 160
},{
xtype: 'datefield',
fieldLabel: 'Data Nascimento'
}]
}]
})
win.show();
Exerccios
5. Pegando o exemplo de formulrio acima, faa com que o campo Sobrenome no permita
ficar vazio e adicione os seguintes campos:
1. Endereo (campo texto);
2. Data Cadastro (campo data, no pode ser vazio);
3. Profisso (Campo texto).
AJAX
O que , para que serve e quando usar.
Citao de Wikipdia: AJAX (programao):
AJAX (acrnimo em lngua inglesa de Asynchronous Javascript And XML) o uso
metodolgico de tecnologias como Javascript e XML, providas por navegadores, para
tornar pginas Web mais interativas com o usurio, utilizando-se de solicitaes
assncronas de informaes. AJAX no somente um novo modelo, tambm uma iniciativa
na construo de aplicaes Web mais dinmicas e criativas. AJAX no uma tecnologia
so realmente vrias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua
parte, oferecendo novas funcionalidades.
AJAX resumidamente uma forma de se comunicar com o lado servidor sem a necessidade
de recarregar a pgina WEB, tornando assim possvel a separao perfeita de uma aplicao em
camadas (MVC). Ele permite que sejam enviados dados do lado cliente para o lado servidor por
POST ou GET e receber dados do servidor como um texto.
A utilizao do AJAX recomendada nos casos onde h a necessidade de enviar dados para
o servidor e/ou trazer dados para a tela de forma minimalista evitando o recarregamento de todos os
elementos de uma pgina, evitando assim tambm o tempo de espera no carregamento de uma
pgina. A sua utilizao no recomendada para trfego de informaes importantes, como dados
de login.
Importante, AJAX uma requisio assncrona, ou seja, o cdigo continua a ser executado
enquanto a requisio est em andamento, o cdigo no espera pela resposta do servidor, por isso
trabalhamos com funes de callback, uma funo anonima passada para a requisio, esta funo
ser chamada ao termino da requisio e receber por parmetro os dados da requisio e o retorno
da mesma, sendo assim temos que trabalhar com os dados dentro deste callback.
No ExtJS podemos dizer que a forma de trabalharmos com AJAX um pouco diferente,
podemos criar uma requisio AJAX na mo e trabalharmos com o retorno dela de forma normal,
porm quando usamos de componentes que fazem este acesso por ns ficamos sujeitos a algumas
convenes. Em geral ao criarmos uma requisio Ext.Ajax.request temos em mente trabalhar
diretamente com os dados retornados, quando usamos um Store por exemplo o componente se
encarrega de trabalhar com os dados, para isso precisamos retorn-los em formato JSON, XML ou
ARRAY.
Exerccios
7. Pegando o exerccio 6 onde temos um Grid ligado a um Store, troque o Store por um que
aceite JSON, retire os dados escritos diretamente no Store e coloque-os em um arquivo, por
exemplo grid.txt, defina a url de leitura dos dados e formate em JSON os dados do arquivo
txt. Note que os dados no sero carregados, temos que dizer ao Store para carreg-los e
para isso h duas formas, colocar autoLoad: true como configurao do Store, ou depois de
cri-lo pegar sua referencia e executar o mtodo load (meuStore.load()). Como no temos
referencia do Store e nem um id para o mesmo temos de usar a opo autoLoad: true que
faz com que os dados sejam carregados assim que o Store for criado.
PHP
Conhecendo o PHP
Citao de Wikipdia: PHP:
PHP (um acrnimo recursivo para "PHP: Hypertext Preprocessor") uma
linguagem de programao de computadores interpretada, livre e muito utilizada para
gerar contedo dinmico na World Wide Web, como por exemplo a Wikipdia.
A linguagem PHP uma linguagem de programao de domnio especfico, ou seja,
seu escopo se estende a um campo de atuao que o desenvolvimento web, embora tenha
variantes como o PHP-GTK. Seu propsito principal de implementar solues web
velozes, simples e eficientes.
Caractersticas:
Velocidade e robustez
Estruturado e orientao a objeto
Portabilidade - independncia de plataforma - escreva uma vez, rode em qualquer
lugar;
Tipagem fraca
Sintaxe similar a Linguagem C/C++ e o PERL
O PHP tem a sintaxe muito similar a sintaxe do JavaScript, usamos de chaves {} para definir
inicio e fim de blocos de cdigo como o contedo de um IF por exemplo, temos variveis com
tipagem entre outras coisas. O PHP nos permite manipular os dados no lado servidor de nossa
aplicao e o mais importante lembrar que temos que imprimir esses dados na tela, para isso
usamos o comando echo que veremos muito no resto da apostila. Em resumo, o que ser impresso
na tela pelo PHP o que o usurio ver se acessar a pagina .php ou o que receberemos por AJAX se
requisitarmos esta pgina .php.
Instalando o PHP
A instalao do PHP ainda mais fcil que a instalao do Apache:
1. Baixe o arquivo do instalador do PHP para windows aqui, selecione o arquivo VC6
x86 Thread Safe tipo Installer, esse o instalador pra quem tem Apache instalado;
2. Execute o instalador;
3. Na primeira tela, Well Come ..., do instalador clique em Next;
4. Na segunda tela, End-User License Agreement, marque o campo I accept the
terms in... para aceitar os termos do contrato de licena e clique em Next;
5. Na terceira tela, Destination Folder, selecione o caminho de instalao ou deixe o
padro e clique em Next;
6. Na quarta tela, Web Server Setup, selecione a opo Apache 2.2.x Module para
que o PHP configure o Apache para ns e clique em Next;
7. Na quinta tela, Apache Configuration Directory, selecione a pasta de configurao
do Apache que a pasta conf dentro da pasta de instalao do apache e clique em
Next;
8. Na sexta tela, Choose Items to Install, h uma arvore, abra o n PHP e dentro dele
PostgreSQL
Conhecendo o PostgreSQL
Citao de Wikipdia: PostgreSQL:
Hoje, o PostgreSQL um dos SGBDs (Sistema Gerenciador de Bancos de Dados) de cdigo
aberto mais avanados, contando com recursos como:
consultas complexas
chaves estrangeiras
integridade transacional
controle de concorrncia multi-verso
suporte ao modelo hbrido objeto-relacional
gatilhos
vises
Linguagem Procedural em vrias linguagens (PL/pgSQL, PL/Python, PL/Java,
PL/Perl) para procedimentos armazenagem
Indexao por texto
Estrutura para guardar dados Georeferenciados PostGIS
idade, integer;
2. INSERT: Agora devemos alterar os arquivos PHP e JS, no arquivo PHP precisamos de uma
estrutura condicional que verifique que ao estamos requisitando, agora teremos duas aes
(SELECT e INSERT) e no arquivo JS precisamos enviar as informaes do formulrio para
o PHP e tambm precisamos enviar qual a ao que queremos realizar.
JS: O FormPanel possui um mtodo interno pra enviar os dados por ajax para o
servidor, o mtodo submit do formulrio interno que tambm possui o mtodo isValid
que verifica se todos os campos esto corretos de acordo com suas validaes.
Observao importante, cada campo do formulrio deve ter a propriedade name
identificando um nome para cada campo, este o nome que usaremos no lado servidor
para pegar os valores enviados. Exemplo:
//isValid retorna true se todos os campos estiverem corretos
if(Ext.getCmp('idDoFormPanel').getForm().isValid()){
Ext.getCmp('idDoFormPanel').getForm().submit({
url:'arquivo.php', //url do arquivo a receber os dados
params:{ //parametros adicionais
acao:'insert'
},
success:function(){
//Cdigo a ser executado ao termino do AJAX
//Como recarregar um grid por exemplo;
}
})
}else{
alert('campos invlidos');
}
PHP: Antes tnhamos apenas uma ao para o arquivo PHP em questo que era retornar
os dados do banco, agora temos 2 (SELECT e INSERT) e no futuro termos mais 2
(UPDATE e DELETE), por esse motivo precisamos saber no lado PHP que ao o lado
cliente est requisitando, para isso passamos um parmetro por POST ao arquivo
informando qual a ao a ser executada e dentro do cdigo PHP podemos fazer um IF e
separa os blocos de ao. O cdigo abaixo no substitui o cdigo j criado no arquivo
PHP, apenas um exemplo de como implementar a condio da ao a ser requisitada.
Cada campo pego por $_POST['nomeDoCampo']. Exemplo:
if($_POST['acao']=='insert'){
$id
= '(SELECT COALESCE(MAX(id), 0)+1 FROM pessoas)';
$nome
= $_POST['nome'];
$profissao = $_POST['profissao'];
$idade = $_POST['idade'];
$result = pg_query($db, "INSERT INTO pessoas(id, nome, profissao, idade)
VALUES($id, '$nome', '$profissao', $idade)");
}else{
//Bloco de cdigo a ser executado case no seja ao 'insert'
//Como o select por exemplo;
}
JS: Precisamos adicionar o campo ID no nosso store para que possamos envia-lo ao PHP
para identificar qual registro queremos excluir, esta alterao no exemplificarei aqui
pois simples, e precisamos adicionar um boto em nossa tela, na TBAR por exemplo, e
definir em seu HANDLER um requisio ajax enviando a ao quer queremos realizar e
o ID do registro a ser excludo. Exemplo:
var grid = Ext.getCmp('gridPessoas');
if(grid.getSelectionModel().getSelected()){
Ext.Ajax.request({
url:'arquivo.php',
params:{
acao:'delete',
id:grid.getSelectionModel().getSelected().data.id
},
success:function(){
grid.getStore().reload();
}
})
}
4. UPDATE: Essa uma ao complicada, ela se resume em pegar a linha selecionada no grid,
carregar estes dados para um formulrio de forma que o usurio possa editar as informaes
e envia-las por submit com a ao de update.
JS: Crie um boto para a alterao, copie o handler do boto de adicionar, coloque um
IF em torno deste cdigo verificando se existe uma linha selecionada no grid, adicione
um campo a mais no formulrio para conter o ID do registro, exemplificarei abaixo,
adicione um listeners na window e dentro adicione o evento show, dentro deste evento
carregue os dados para o formulrio (os campos devem ter os mesmos nomes dos
campos do store) e no handler do boto de salvar altere a ao para update:
//cdigo a ser adicionado a window
//listeners uma propriedade da window assim como height, width, etc
listeners:{
show: function(){
var form = Ext.getCmp('formPessoas').getForm();
form.loadRecord(grid.getSelectionModel().getSelected());
}
}
Extend e Override
Adaptando o ExtJS as nossas necessidades
Ext.extend e Ext.override so formas de modificar e adicionar classes da biblioteca ExtJS,
ambos so funes internas da biblioteca.
1. Extend: Esta funo nos permite estender uma classe j existente adicionando novas
propriedades, mtodos, eventos e valores padro. Um bom e simples exemplo seria estender
a classe Window para uma classe chamada MyWindow e adicionar a ela altura e largura
padro:
Ext.onReady(function(){
Ext.namespace('Ext.ux');
Ext.ux.MyWindow = Ext.extend(Ext.Window, {
height:200,
width:300
})
var win = new Ext.ux.MyWindow({
title:'Teste',
html:'<b>Minha primeira janela em ExtJS</b>'
})
win.show();
})
2. Override: Esta funo nos permite adicionar funcionalidades a uma classe j existente sem
que seja necessria a criao de uma nova classe. Um bom exemplo seria adicionar um
mtodo a classe Ext.data.Store que nos permita adicionar registros mais facilmente como
demonstrado no cdigo abaixo, um exemplo mais complexo e de grande utilidade um
override que nos permite adicionar colunas em um formulrio de forma fcil que pode ser
encontrado aqui:
Ext.override(Ext.data.Store, {
insertRecord: function(record,index){
index = index || 0;
record = record || {};
this.insert(index, new this.recordType(record,null,true))
}
})
//Antes do override tinhamos de proceder assim:
//store.insert(0, new store.recordType(form.getForm().getValues()));
//Aps o override podemos proceder assim:
//store.insertRecord(form.getForm().getValues());
Fim
Agradecimentos
Obrigado a todos que estiveram presentes neste pequeno curso, aos laboratoristas e claro aos
professores da FACCAT em especial ao coordenador do curso de Sistemas de Informao Marcelo
Azambuja.
Abraos a todos.