EXT – Trabalhando com formulários – Parte 02
Neste artigo iremos simular um site que possui um formulário de contato, acessado através de um link, que realiza o envio de informações através de AJAX. Quando o usuário clicar no link Fale Conosco, surge uma janela com o formulário. Após o usuário preencher o formulário e clicar em enviar, utilizamos AJAX do próprio EXT para enviar a informação ao servidor.
Obs: É válido lembrar que as bibliotecas do EXT possuem por volta de 500Kb, então não vale a pena você utilizar EXT somente para criar um formulário de contato dentro do seu site. Este exemplo é apenas uma forma de mostrar alguns conceitos do EXT.
Primeiramente, vamos montar a estrutura inicial do nosso site. Imagine um site qualquer que possua um menu, um pouco de css e o código básico do EXT.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de Formulário</title>
<!-- EXT Início -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<!-- EXT Fim -->
<style type="text/css">
*{
font: 12px Verdana;
}
body{
background:url(http://blogwindows.files.wordpress.com/2007/01/mac-wallpaper.JPG) repeat-x;
}
h1{
background-color: #aabbcc;
padding: 5px;
font: 18px Verdana;
}
ul{
margin: 5px;
width: 200px;
}
li{
margin:5px;
background-color: #aaaaaa;
}
a{
font: 12px Verdana;
color: #ffffff;
text-decoration: none;
}
</style>
<script language="javascript">
Ext.onReady(function() {
});
</script>
</head>
<body>
<h1>Este é um site qualquer</h1>
<div>
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Quem Somos</a></li>
<li> <a href="#">Serviços</a></li>
<li> <a href="#">Clientes</a></li>
<li> <a id="linkContato" href="#">Contato</a></li>
</ul>
</div>
</body>
</html>O código acima produz o seguinte resultado:
Neste simples site, temos um menu cujo o item “Contato” possui um id. Com isso, o EXT pode “pegar” este item e manipulá-lo. Podemos pegar o item e adicionar um evento a ele. Por exemplo:
Ext.onReady(function() {
var itemContato = Ext.get("linkContato");
itemContato.on("click",function(){
alert("Clicou...");
})
});No exemplo acima, pegamos o item “Contato”, ou seja, o EXT manipulou a DOM do documento HTML para que criássemos uma referencia àquele item. Depois, criamos adicionamos uma função ao evento click do item. O código abaixo produz o mesmo efeito:
Ext.onReady(function() {
Ext.get("linkContato").on("click",function(){
alert("Clicou...");
})
});Agora temos que, ao clicar no menu, exibir uma janela (Componente Ext.window). Veja:
<script language="javascript">
var ContatoWindow;
Ext.onReady(function() {
Ext.get("linkContato").on(´click´,function(s,e){
if (ContatoWindow == null)
{
ContatoWinodow = new Ext.Window({
id:´ContatoWindow´
, title: "Entre em contato Conosco"
, layout: ´fit´
, width: 500
, height: 300
, closeAction :´hide´
, plain: true
, modal: true
});
}
ContatoWinodow.show();
});
});
</script> Agora criamos uma variável ContatoWindow e caso ela ainda não esteja criada, criamos a Janela. Ao clicar no item “Contato” do menu, temos o seguinte resultado:
Agora vamos criar o formulário de contato. Este formulário terá os campos Nome, Email, Assunto e Mensagem. Os campos serão criados através da criação de um formulário (variável MeuForm) e da adição dele à janela.
<script language="javascript">
var ContatoWindow;
var MeuForm;
Ext.onReady(function() {
Ext.get("linkContato").on(´click´,function(s,e){
MeuForm = new Ext.form.FormPanel({
id: ´MeuForm´
, baseCls: ´x-plain´
, labelWidth: 100
, labelAlign : ´right´
, style: ´margin:15px´
, defaultType: ´textfield´
, items: [{
fieldLabel: ´Nome´,
name: ´nome´,
anchor:´90%´
},{
fieldLabel: ´Email´,
name: ´email´,
anchor: ´90%´
},{
fieldLabel: ´Assunto´,
name: ´assunto´,
anchor: ´90%´
}, {
fieldLabel: ´Mensagem´,
xtype: ´textarea´,
name: ´mensagem´,
anchor: ´90% -100´
}]
});
if (ContatoWindow == null)
{
ContatoWinodow = new Ext.Window({
id:´ContatoWindow´
, title: "Entre em contato Conosco"
, layout: ´fit´
, width: 500
, height: 300
, closeAction :´hide´
, plain: true
, modal: true
, items: MeuForm
, buttons: [{
text: ´Ok´
},{
text: ´Cancelar´
}]
});
}
ContatoWinodow.show();
});
});
</script> Agora temos duas variáveis: ContatoWindow e MeuForm. ContatoWindow representa a janela que se abra após o usuário clicar no item Contato. Além disto, ContatoWindow possui um item que é a variável MeuForm. Esta variável é um FormPanel do Ext, criado para possuir os campos que necessitamos.
Deixamos como “dever de casa” você analisar as propriedades de FormPanel através da API do Ext, encontrada em: http://extjs.com/deploy/dev/docs/
Algumas propriedades são importantes, como defaultType, que indica o tipo padrão de campo que será inserido no form, caso não seja inserido o tipo. Como queremos inserir 3 campos do tipo TextField, é melhor definir a propriedade defaultType e adicionar items sem tipo no FormPanel, do que criar diversos itens do tipo TextField.
Também usamos a propriedade anchor para definir uma âncora nos controles, ou seja, quando alterarmos o tamanho da janela do formulário, os campos serão alterados também.
O resultado é:
No próximo artigo iremos adicionar funcionalidades ao botão “OK”.
O código completo está descrito abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de Formulario</title>
<!-- EXT Inicio -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<!-- EXT Fim -->
<style type="text/css">
*{
font: 12px Verdana;
}
body{
background:url(http://blogwindows.files.wordpress.com/2007/01/mac-wallpaper.JPG) repeat-x;
}
h1{
background-color: #aabbcc;
padding: 5px;
font: 18px Verdana;
}
ul{
margin: 5px;
width: 200px;
}
li{
margin:5px;
background-color: #aaaaaa;
}
a{
font: 12px Verdana;
color: #ffffff;
text-decoration: none;
}
</style>
<script language="javascript">
var ContatoWindow;
var MeuForm;
Ext.onReady(function() {
Ext.get("linkContato").on(´click´,function(s,e){
MeuForm = new Ext.form.FormPanel({
id: ´MeuForm´
, baseCls: ´x-plain´
, labelWidth: 100
, labelAlign : ´right´
, style: ´margin:15px´
, defaultType: ´textfield´
, items: [{
fieldLabel: ´Nome´,
name: ´nome´,
anchor:´90%´
},{
fieldLabel: ´Email´,
name: ´email´,
anchor: ´90%´
},{
fieldLabel: ´Assunto´,
name: ´assunto´,
anchor: ´90%´
}, {
fieldLabel: ´Mensagem´,
xtype: ´textarea´,
name: ´mensagem´,
anchor: ´90% -100´
}]
});
if (ContatoWindow == null)
{
ContatoWinodow = new Ext.Window({
id:´ContatoWindow´
, title: "Entre em contato Conosco"
, layout: ´fit´
, width: 500
, height: 300
, closeAction :´hide´
, plain: true
, modal: true
, items: MeuForm
, buttons: [{
text: ´Ok´
},{
text: ´Cancelar´
}]
});
}
ContatoWinodow.show();
});
});
</script>
</head>
<body>
<h1>Este e um site qualquer</h1>
<div>
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Quem Somos</a></li>
<li> <a href="#">Servicos</a></li>
<li> <a href="#">Clientes</a></li>
<li> <a id="linkContato" href="#">Contato</a></li>
</ul>
</div>
</body>
</html>trabalha com desenvolvimento web desde 1998 e atualmente dedica-se a escrever livros sobre programação e desenvolvimento de sistemas, disponíveis no seu site.
