EXT – Trabalhando com formulários – Parte 3
Com o formulário pronto, iremos programar o evento no botão “OK”. Este botão irá, via AJAX, chamar uma url em um servidor PHP. Para que o exemplo funcione, você precisa que este servidor esteja funcionando.
Existem explicações a respeito de servidores WEB Apache+PHP aqui:
Quando clicamos no botão “OK”, temos que submeter o formulário através do método submit, passando alguns parâmetros a ele. Este método é exibido abaixo:
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'
, handler: function()
{
MeuForm.getForm().submit({
url: "arquivo.php"
, waitMsg: 'Consultando servidor'
, waitTitle : 'Aguarde....'
, success: OnSuccess()
, failure: OnFailure
});
}
}]
});O botão OK agora possui uma propriedade chamada handler, que é uma função que usa o script MeuForm.getForm().submit() para submeter o formulário. Neste método submit(), passamos um conjunto de propriedades que vão configurar o envio de dados ao servidor.
Fornecemos as seguintes propriedades:
url: A url do servidor que será acionada.
waitMsg: A mensagem que aparece na janela quando a requisição Ajax é acionada.
waitTitle: O título da janela que surge quando a requisição Ajax é acionada.
success: Um método executado após a requisição Ajax ser feita.
failure: Método executado se algo falhar
Veja que em nenhum momento temos que pegar os valores do formulário, pois estes valores são preenchidos automaticamente, quando o evento submit é acionado. Assim, no lado do PHP, podemos obter as variáveis do formulário através das variáveis POST, por exemplo:
<?php
$resultado = $_POST["nome"];
// aqui deveria enviar um email ou outra coisa qualquer
echo "{success: true,msg: 'Você digitou $resultado'}";
?>Neste arquivo PHP, pegamos o valor “nome” que veio do campo do EXT (lembre-se, sem ter que passar ele). Depois concatenamos em uma mensagem de result.
É MUITO IMPORTANTE o success: true pois é ele que faz com que o método succes do ext seja disparado. Se o seu resultado não tiver success:true, o método executado será o failure.
Segue abaixo o código completo do formulário.
<!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'
}]
});
function OnSuccess(form,action){
alert(action.result.msg);
}
function OnFailure(form,action){
alert(action.result.msg);
}
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'
, handler: function()
{
MeuForm.getForm().submit({
url: "arquivo.php"
, waitMsg: 'Consultando servidor'
, waitTitle : 'Aguarde....'
, scope: this
, success: OnSuccess
, failure: OnFailure
});
}
}]
});
}
ContatoWinodow.show();
});
});
</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>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.
