0 Compartilhamentos 10 Views

ExtJS 3.0 – Formulário com ComboBox e mensagens de validação

18 de junho de 2012

Este artigo tem a intenção de mostrar um formulário feito com ExtJS com as seguintes características:

  • Possui um ComboBox que busca seus valores em uma página PHP e possui autocomplete dos valores possíveis.
  • Envia os dados por AJAX.
  • Apresenta para cada campo, mensagens sobre a validação server-side dos dados enviados.

A motivação em escrever este pequeno artigo está no fato de que eu enfrentei dificuldades para conseguir compor um formulário com essas características, embora seja algo simples. Por isso, quero compartilhar esse conhecimento adquirido com muitas horas de estudo e pesquisa, para que outros programadores não sofram tanto quanto eu.

A didática deste artigo será a seguinte:

Vou apresentar o código de cada arquivo com comentários sobre cada parte relevante.

Quero também ressaltar que os arquivos PHP contém código apenas para fornecer os dados necessários para este artigo, portanto, tem validade didática também.

O primeiro arquivo é dados_login.php, que nada mais faz do que fornecer uma saída JSON com os valores que irão aparecer no ComboBox.

Em seguida, temos o arquivo do formulário propriamente dito: login.php. Este arquivo contém as inclusões das bibliotecas e CSS do Ext, bem como o código do formulário (preferi colocá-lo dentro do arquivo principal, ao invés de fazer um arquivo separado).

Por fim, o arquivo logar.php é que faz a validação dos dados e informa se houve sucesso ou falha, neste caso informando os campos e os erros.

O funcionamento deste código é o seguinte:

O usuário pode digitar o nome do sistema desejado (verifique o autocomplete do ComboBox) ou selecioná-lo na lista apresentada, informar um nome de usuário e uma senha. Se os dados conferem com os dados válidos, é exibida uma mensagem de sucesso, senão, são exibidas mensagens de erro abaixo dos campos com problemas.

Espero que este pequeno artigo ajude àqueles que desejam trabalhar com ExtJS.

Um especial agradecimento à comunidade brasileira dos utilizadores do ExtJS e ao siteSaki’s Ext Examples.

Você pode se interessar

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1
Vídeos
22 visualizações
Vídeos
22 visualizações

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1

Gabriel Fróes - 9 de outubro de 2017

No último vídeo do canal demos algumas dicas sobre como preparar seu currículo para uma vaga de programador mas esquecemos de uma dica super importante que falaremos nesse vídeo.

Confira os principais trailers da New York Comic Con 2017
Notícias
31 visualizações
Notícias
31 visualizações

Confira os principais trailers da New York Comic Con 2017

Carlos L. A. da Silva - 9 de outubro de 2017

Festa dos quadrinhos foi palco de trailers de mega-produções do cinema e séries de TV: Liga da Justiça, The Walking Dead e novo Círculo de Fogo. Confira!

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma
Notícias
9 visualizações
Notícias
9 visualizações

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma

Carlos L. A. da Silva - 9 de outubro de 2017

Segundo o jornal The Washington Post, empresa teria começado sua investigação depois de casos similares no Twitter e no Facebook.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Executivo da Microsoft confirma desinteresse no Windows Phone
Notícias
29 visualizações
29 visualizações

Executivo da Microsoft confirma desinteresse no Windows Phone

Carlos L. A. da Silva - 9 de outubro de 2017
Elon Musk critica Google Clips
Notícias
65 visualizações
65 visualizações

Elon Musk critica Google Clips

Carlos L. A. da Silva - 9 de outubro de 2017
Michel Temer vetou emenda que poderia censurar a internet
Notícias
26 visualizações
26 visualizações

Michel Temer vetou emenda que poderia censurar a internet

Carlos L. A. da Silva - 9 de outubro de 2017