Olá galera tudo bem?
Estou aqui fazendo o meu primerio artigo a respeito da biblioteca EXT que eu considero muito boa, no entanto exige um pouco de paciência para poder trabalhar com ela (EU MESMO ESTOU APANHANDO IGUAL CRIANÇA QUE APANHOU DA MÃE POR CAUSA DE SALA – Nossa um bróquolis com sal agora HUMHUMHUMHUM).
Bem primeiramente gostaria de salientar que eu ainda não sou muito bom nisto e estou iniciando o trabalho com esta biblioteca por agora, então se tiverem pergunta façam (SIM EU SOU CASADO) mas pode ser que demore sair a resposta.
Esta é a tela de login:
Bem primeiramente seria bom fazermos uma boa organização das pastas – lembrando que isto é fundamental em qualquer projeto que se for iniciar. Eu criei a seguinte estrutura, separando as imagens, os JS e os CSS em cada pasta separada, assim fica mais fácil de referenciar cada uma delas. Seguindo esta estrutura
RAIZ
| - css (meus arquivos de css)
| - images (minhas imagens que irei utilizar)
| - js (meus arquivos em js)
-index.php
-teste.php
A primeira coisa é definir os arquivos da biblioteca que iremos utilizar. Eu pequei ext-all.js e ext-base.js Não ficarei explicando tudo a respeito desta biblioteca – uma porque nem eu sei KAKAKAKAKAKA – mas seria bom, dentro delas, pegar somente as funções que nos interessa.
Em relação ao CSS eu pequei o seguinte arquivo ext-all.css.
Dentro da pasta IMAGES eu busquei as imagens padrão (default) da própria bibliteca.
Cheque de enrolação, credo… mas como dizem por aí, documentação é tudo e fundamental. (ESTE É O MAIOR MAL DOS PROGRAMADORES – DOCUMENTAÇÃO) eita racinha ruim de escrever né? “Saber o português pra que? O Word já corrigi pra mim automaticamente.”
Bom vamos lá. Segue abaixo o código da página index.php.
<html>
<head>
<title>Login</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”css/ext-all.css” />
<script type=”text/javascript” src=”js/ext-base.js”></script>
<script type=”text/javascript” src=”js/ext-all.js”></script>
<script>
Ext.onReady(function(){
var win = new Ext.Window({
title:’Login de acesso ao sistema XXX’,
modal:true,
width:400,
height:130,
resizable:false,
items:[
new Ext.form.FormPanel({
id:’formPanel’,
bodyStyle:’padding:5px 5px 5px 5px; border:none; background:#bacce4 no-repeat center top;’,
items:[{
id:’acao’,
inputType:’hidden’,
xtype:’textfield’,
name:’acao’,
value:’login’
},{
id:’usuario’,
fieldLabel:’Login’,
xtype:’textfield’,
name:’usuario’,
allowBlank:false,
width:260
},{
id:’senha’,
fieldLabel:’Senha’,
inputType:’password’,
xtype:’textfield’,
name:’senha’,
allowBlank:false,
width:100
}]
})
],
buttons:[{
text:’Validar’,
handler:function(){
document.forms[0].action = ‘teste.php’;
document.forms[0].submit();
}
},{
text:’Lembrar Senha’,
handler:function(){
var winSenha = new Ext.Window({
modal:true,
title:’Lembrar senha’,
width:400,
height:100,
resizable:false,
items:[
new Ext.form.FormPanel({
id:’formPanelLembrarSenha’,
bodyStyle:’padding:5px;border:none;background:#bacce4;’,
items:[{
id:’acao’,
inputType:’hidden’,
xtype:’textfield’,
name:’acao’,
value:’senha’
},{
id:’usuarios_email’,
fieldLabel:’Digite seu e-mail’,
name:’usuarios_email’,
xtype:’textfield’,
allowBlank:false,
width:’90%’
}]
})
],
buttons:[{
text:’Enviar’,
handler:function(){
document.forms[1].action = ‘teste.php’;
document.forms[1].submit();
}
}]
});
winSenha.show();
}
}]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
Viu como foi fácil. Agora vamos por parte. Não vou explicar tudo, pois a maioria já sabe como programar, só irei mostrar os itens fundamentais. Vamos então:
Aqui eu inicio a criação da minha biblioteca e da minha janela. Onde eu defino o título da janela, o tipo de exibição (se é modal ou não – se não souberem o q é isto me avise :D) a lagura, algura e se poderá ou não ser redimensionada (resizable).
var win = new Ext.Window({
title:’Login de acesso ao sistema XXX’,
modal:true,
width:400,
height:130,
resizable:false,
items:[
Na parte de ITEMS que vem o segredo, é nele q eu vou inserir os meus conteúdos: Ele será composto por um formulário e dois botões.
Esta é a parte do formulário:
new Ext.form.FormPanel({id:’formPanel’,
bodyStyle:’padding:5px 5px 5px 5px; border:none; background:#bacce4 no-repeat center top;’,
items:[{
id:’acao’,
inputType:’hidden’,
xtype:’textfield’,
name:’acao’,
value:’login’
},{
id:’usuario’,
fieldLabel:’Login’,
xtype:’textfield’,
name:’usuario’,
allowBlank:false,
width:260
},{
id:’senha’,
fieldLabel:’Senha’,
inputType:’password’,
xtype:’textfield’,
name:’senha’,
allowBlank:false,
width:100
}]
})
Repare que dentro do formulário também tem itens, pois ele é composto dos valores abaixo, caso eu queira colocar alguma outra coisa para poder fazer a validação basta inserir no itens do formulário, como por exemplo:
{
id:’id_do_novo_campo’,
fieldLabel:’O que se vai ler’,
xtype:’textfield’,
name:’novo_nome’,
allowBlank:false,
width:260
}
Bom agora vamos a parte dos botões, esta é a pior parte (pq é mais longa :D). Ele é composto somente de dois botões VALIDAR e LEMBRAR SENHA. Só para relembrar o botão LEMBRAR SENHA deverá abrir outra janela e nesta janela deverá ter os seus itens. Vamos lá então:
buttons:[{text:’Validar’,
handler:function(){
document.forms[0].action = ‘teste.php’;
document.forms[0].submit();
}},{
text:’Lembrar Senha’,
handler:function(){
var winSenha = new Ext.Window({
modal:true,
title:’Lembrar senha’,
width:400,
height:100,
resizable:false,
items:[
new Ext.form.FormPanel({
id:’formPanelLembrarSenha’,
bodyStyle:’padding:5px;border:none;background:#bacce4;’,
items:[{
id:’acao’,
inputType:’hidden’,
xtype:’textfield’,
name:’acao’,
value:’senha’
},{
id:’usuarios_email’,
fieldLabel:’Digite seu e-mail’,
name:’usuarios_email’,
xtype:’textfield’,
allowBlank:false,
width:’90%’
}]
})
],
buttons:[{
text:’Enviar’,
handler:function(){
document.forms[1].action = ‘teste.php’;
document.forms[1].submit();
}
}]
});
winSenha.show();
}
}]
Caso eu queira colocar um botão novo basta inserir:
{
text:’Value_do_botão’,
handler:function(){
document.forms[0].action = ‘acao_do_formulario’;
document.forms[0].submit();
}
}
Eu acho que não vou precisar entrar em detalhes a respeito do botão LEMBRAR SENHA pelo seguinte motivo:
1 – A parte de itens eu já mostrei acima, a única diferença é que o seu item é um formulário e dentre deste formulário eu posso colocar qualquer coisa como por exemplo um botão para cancelar, do tipo:
{
text:’Cancelar’,
handler:function(){
winSenha.close();
}
}
Aí no outro formulário eu teria dois botão um cancelar e um enviar.
Há… nossa lembrei agora…. ainda bem né.. antes tarde do que nunca 
Quanto mais form’s você for colocando você tem que referenciar o mesmo dentro do array, ou seja, repara que no primeiro envio estava:
document.forms[0].action = ‘acao_do_formulario’;
Já no Segundo estava:
document.forms[1].action = ‘acao_do_formulario’;
Se tivéssemos um terceiro formulário então o mesmo seria:
document.forms[2].action = ‘acao_do_formulario’;
E assim sucessivamente.
Agora vamos para a página TESTE.PHP onde irá receber o resultado. Esta é a pior parte,a parte do PHP onde ninguém aqui sabe como trabalhar (lembrando que PHP não vem de Puta Hombre que Porra é esta?).
Segue o complexo código do PHP da página teste.php:
<?
$usuario = $_POST[’usuario’];
$senha = $_POST[”senha”];
$email = $_POST[”usuarios_email”];
$acao = $_POST[”acao”];
if ($acao == “login”) {
echo “Usuário: “.$usuario.”<br>Senha: “.$senha;
} else if ($acao == “senha”) {
echo “Olá “.$email.” estamos enviando a sua nova senha”;
}
?>
Nossa passei dias pensando em como vou explicar isto pra vc’s e lembrei… HÁ, OS CARAS ESTÃO ESTUDANDO PARA TIRAR CERTIFICAÇÃO, ENTÃO QUE ELES RALEM NO CÓDIGO COMPLEXO ACIMA.
Galera por enquanto isto é tudo, espero ter ajudado (nem que seja a encher o nosso site de besteira) em alguma coisa e estamos aí pra isto…
Um forte abraços a todos e como eu sempre digo: UM ABRAÇO PARA QUEM É DE ABRAÇOS E UM BEIJO PARA QUEM É DE BEIJOS
Até a próxima.
Prof. Baco (Edmar Carvalhaes)
Obs.: kakakakaka… pensaram que tinha acabado né… kakakakakka se engaram…. iludibriaram… akakakaka… tapiei vocês kakakakakaka…. acabou não… falta um detalhe, uma coisinha só… mas isto eu conto no próximo artigo… KAKAKAKAKAKAKAKAKAKAKAKA. Só para ir aditantando, nós próximos artigos serão a respeito CAPTCHA e a validação por CARREGANDO da ext.