EXT – Trabalhando com formulá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.

Criar formulários com os campos mais distribuídos pode se tornar uma tarefa um pouco “chata”, pois depende de conhecimento extra com tabelas (as mesmas tabelas do HTML..)

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.

Vamos então criar o formulário mais simples. Para isso, o Ext possui um componente especial chamado Ext.FormPanel. Com ele podemos criar um formulário rapidamente, como no exemplo abaixo:

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.

O parâmetro defaults atribui o parâmetro width:230 a todos os campos do formulário que estão definidos na propriedade items.

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:

http://tof2k.com/ext/formbuilder/

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.

Para ver o código do formulário gerado, basta clicar no botão Show/Edit JSON.

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.