iMasters | Por uma internet mais criativa e dinâmica

• Javascript

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 13 comentários

Obs: A partir deste artigo não irei mais colocar todo o código fonte dos exemplos. Ou seja, não incluo a parte HTML que insere as bibliotecas EXT e as tags DIV que o EXT renderiza. Se tiver dificuldades, veja os artigos anteriores para maiores detalhes.

Neste artigo criaremos um formulário usando os componentes do EXT. A criação de formulários é relativamente simples, desde que você aceite que os campos devam ficar um abaixo do outro, podendo ter duas colunas ou não.

Então, sabemos que criar um formulário como na figura abaixo é bastante simples.

Ou

E já sabemos que criar um formulário um pouco mais complexo exige mais trabalho.

var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:´save-form.php´,
        frame:true,
        title: ´Simple Form´,
        bodyStyle:´padding:5px 5px 0´,
        width: 350,
        defaults: {width: 230},
        defaultType: ´textfield´,

        items: [{
                fieldLabel: ´First Name´,
                name: ´first´,
                allowBlank:false
            },{
                fieldLabel: ´Last Name´,
                name: ´last´
            },{
                fieldLabel: ´Company´,
                name: ´company´
            }, {
                fieldLabel: ´Email´,
                name: ´email´,
                vtype:´email´
            }, new Ext.form.TimeField({
                fieldLabel: ´Time´,
                name: ´time´,
                minValue: ´8:00am´,
                maxValue: ´6:00pm´
            })
        ],

        buttons: [{
            text: ´Save´
        },{
            text: ´Cancel´
        }]
    });

Este exemplo, retirado do site oficial do Ext, desenha o formulário da primeira figura deste artigo. Podemos perceber uma nova propriedade chamada labelWidth, que define o tamanho em pixels dos Labels do formulário.

Quando definimos os campos, podemos inserir textfields automaticamente, pois a propriedade defaultType definiu isso. Para qualquer outro tipo de campo, temos que criar uma instância conforme foi feito com o Ext.form.TimeField.

Criando um formulário através do FormBuilder

Agora que você conhece o básico, tenho certeza que quer saber quais são os componentes disponíveis do EXT e como desenhá-los de maneira mais fácil. Existe uma ferramenta muito legal criada por Christophe Badoit e que está disponível em:

Acessando este endereço, você obtém uma tela como a mostrada abaixo.

Com esta ferramenta você pode arrastar os campos para o centro da tela e criar o formulário com mais facilidade. Arraste inicialmente um componente FormPanel e depois arraste os componentes de formulário.

Bom, eu vou parar por aqui, e deixar vocês brincarem com o FormBuilder. No próximo artigo iremos falar um pouco mais do FormPanel.

Todos os artigos de Daniel Schmitz

13 comentários publicados

• 1. Show

  Quinta-feira, 02/10/2008, por Andre Luz da Silva
  

  Adorei estou cada vz mais estudando o JSON, o JQuery e agora o EXT , adoro client side adorei a matéria está de parabéns, mal posso esperar por mais novidades
  
  abraços!

  Responder comentário

• 2. Outro editor

  Sexta-feira, 03/10/2008, por Daniel Schmitz
  

  Pessoal, aproveitando a matéria achei outro editor EXT.
  http://www.projectspace.nl/

  Responder comentário

• 3. Gostaria de saber mais

  Segunda-feira, 06/10/2008, por Robson Florentino da Silva
  

  Olá Daniel, estou acompanhando suas materias sobre o Extjs, gostei muito, e já estou tentando uma implementação nos projetos onde trabalho, estou usando o padrão de namespaces, para organizar o código, porém não consigo achar uma forma de atraves de um link atualizar o conteúdo de um panel com um form por exemplo. Como posso fazer isso, Você poderia também criar um exemplo de arquitetura usando Ext e PHP? Aguardo uma respota. Valeu, Ótimo Post. Adorei mesmo.

  • Daniel Schmitz - Terça-feira, 14/10/2008

    

    Olá,
    
    eu já estou preparando um exemplo deste tipo ok

  Responder comentário

• 4. Alguns exemplos não funcionaram comigo

  Terça-feira, 14/10/2008, por Anderson Alves de Almeida
  

  Como vai Daniel, realmente essas suas matérias sobre o EXT estão nota 10, estou muito interessado nessa nova ferramenta e devo isso a você, muito obrigado mesmo, porém estou com algumas dificuldades para executar seus exemplos, to fazendo tudo desde a primeira matéria e até agora só o que funcionou foi o 1º exemplo, todos os outros me retornam apenas uma pagina em branco, o detalhe é que mesmo o ctrl-C ctrl-V dos seus exemplos causa isto, e os exemplos próprios que veem junto com o EXT funcionam normalmente. Estou executando seus exemplos dentro do diretório correto.

  • Daniel Schmitz - Terça-feira, 14/10/2008

    

    Olá Anderson. Com certeza algo de errado esta acontecendo. Você conhece a ferramenta firebug? acessa ae: http://getfirebug.com/
    
    Com ela você pode encontrar mais facilmente o erro e postar para nós. Lembre-se que o firebug é um plugin do firefox, entao vc deve ter ele ok.
    
    Me fale dos seus avanços ae!

  • Anderson Alves de Almeida - Quarta-feira, 15/10/2008

    

    Daniel, obrigado pela dica do firebug, com ele encontrei o erro, o erro acontecia quando eu copiava o código da pagina do imasters para meu editor, ao invés de aspas simples o que vem é um acento, e isso gerava o erro, assim que os sibstitui tudo funcionou perfeitamente.

  Responder comentário

• 5. Artigo quase pronto

  Terça-feira, 14/10/2008, por Daniel Schmitz
  

  Pessoal, eu fiquei sem internet por 2 semanas .. então o próximo artigo está atrasado. Mas vou tentar liberar o artigo até sexta agora para que até segunda o pessoal do iMasters possa colocar o artigo no ar. valew!

  Responder comentário

• 6. oi galera ve o que eu achei sobre savascript

  Terça-feira, 18/11/2008, por Jojo Jaja
  

  oi galera ve o que eu achei sobre savascript

  Responder comentário

• 7. Duvida em um trabalho

  Terça-feira, 18/11/2008, por Leandro Santos
  

  Ola Daniel tudo ok, é o seguinte acabei de ingressar nest area de javascript e etstou achando bem interessante, estou com uma divida em dos meus trabalhos e gostaria de lhe enviar para seu e-mail mais procurei no site e nao o encontrei, se puder me responder para que eu possa lhe enviar o arquivo, se puder me ajudar ficarei grato professor abraços...leandro_disco@terra.com.br

  Responder comentário

• 8. oi pessoal ve o que eu encontrei sobre javascript

  Terça-feira, 18/11/2008, por Jojo Jaja
  

  http://portalvideoaulas.com//play.php?vid=139

  Responder comentário

• 9. oi pessoal ve o que eu encontrei sobre javascript

  Terça-feira, 18/11/2008, por Jojo Jaja
  

  http://portalvideoaulas.com//play.php?vid=139

  Responder comentário

• 10. Javascript

  Sábado, 11/04/2009, por Max Oliveira
  

  Para quem gosta de brincar com javascript
  
  http://pedromenezes.com/os-40-melhores-plugins-da-jquery-para-facilitar-a-vida-do-desenvolvedor-web
  

  Responder comentário

Sobre o autor

Daniel Schmitz é Desenvolvedor Web desde 1998. Sempre atento a novas tecnologias, já criou artigos sobre Zope, Flex e PHP. Atualmente é Analista de Sistemas da Prolink Tecnologia LTDA."

Indique para um amigo

Tags relacionadas

brasil php lançamento youtube criação tecnologia mobile seguranca 3g linux ti publicidade crescimento iphone celular desenvolvimento google android windows microsoft internet yahoo web mercado apple twitter

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!