Faça o curso: jQuery na Prática

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.