Criando uma Aplicação CRUD com ExtJS 4 MVC: Parte 4

Parte 4 da série de posts explicando passo a passo como criar uma aplicação simples com ExtJS 4 usando o MVC.

Este tutorial está dividido em 5 partes - hoje vamos ver a quarta parte:

  1. Preparando o Ambiente e montando o Projeto (Parte 1)
  2. Criando o Model e Store (Parte 2)
  3. Criando a View - Grid (Parte 3)
  4. Criando a View - Formulário (Parte 4)
  5. Criando o Controller (Parte 5)

A quarta parte inclui:

  1. Criando o Formulário

1 - Criando o Formulário

Bem, essa quarta parte do tutorial é mais simples que as outras. Hoje vamos criar apenas o formulário para criação ou edição de algum contato. No post anterior criamos um grid com um botão para criar um contato – a ideia é que quando o usuário clicar nesse botão, uma janela se abra para o usuário entrar com os dados do novo contato – e é essa janela que vamos construir hoje. Outra idéia é quando o usuário der um duplo clique em algum registro do grid, uma janela também se abra com os dados do registro para o usuário poder editar. Vamos usar a mesma janela para criar/editar um contato.

Para criar essa janela com formulário, vamos criar um arquivo chamado Formulario.js dentro de app/view/contato:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.view.contato.Formulario', {
extend: 'Ext.window.Window',
alias : 'widget.contatoform',

requires: ['Ext.form.Panel','Ext.form.field.Text'],

title : 'Editar/Criar Contato',
layout: 'fit',
autoShow: true,
width: 280,

iconCls: 'icon-user',

initComponent: function() {
this.items = [
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',

fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},

items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Nome'
},
{
xtype: 'textfield',
name : 'phone',
fieldLabel: 'Telefone'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];

this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
text: 'Salvar',
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancelar',
scope: this,
handler: this.close
}]
}];

this.callParent(arguments);
}
});
[/code]

Na linha 1 temos o nome da classe. Acho que nesse quarto post já pegaram a ideia de como formamos no o nome da classe né? :

  • ExtMVC por causa do nome da nossa aplicação;
  • View por causa do nome do pacote (diretório view);
  • Contato por causa do subdiretório de viewview/contato;
  • Formulario porque o nome do nosso arquivo é Formulario.js

Depois, na linha 17 temos a declaração do form como um item da Window.

Nas linhas 22 a 28 temos algumas configs que serão aplicadas em todos os campos do form.

Nas linhas 30 a 53 temos a declaração dos campos do form. Uma coisa muito importante aqui é a config name de cada campo. Note que o name é o mesmo do nome dos campos do Model. Isso vai ajudar muito a gente quando quisermos carregar uma instância do Model diretamente no Form. Note também que o name é como se fosse um id. Outra dica é evitar o uso de ids a qualquer custo em uma app ExtJS – não é uma boa prática!

Outro ponto é notar que o campo id é um campo do tipo hidden, ou seja, ele está lá no form, mas o usuário não vai ver. Isso também é mais uma coisa que vai nos ajudar muito depois!

Depois, nas linhas 56 a 71 temos a declaração de uma toolbar (dockedItem) que vai ficar no rodapé do form (dock: bottom) com dois botões. O botão de salvar tem uma action que vai nos ajudar a capturar o evento depois no Controller.

Outra coisa que quero que notem (pro pessoal que já trabalha com ExtJS a algum tempo) é que em nenhum momento estamos usando a config buttons. Sempre use uma toolbar como dockedItem e coloque o seus botões na toolbar. No Ext JS 4, dockedItem com toolbar como item substitui o uso da config buttons. Vamos logo adotar as boas práticas! :)

Conclusão:

Bem pessoal, por hoje é só isso que vamos ver mesmo. Esse post foi o menor da série, mas no próximo vamos ver como programamos o Controller, que é onde o pessoal fica com mais dúvidas.

Observe que nas Views que criamos (Grid e Formulario) em momento nenhum do código estamos colocando lógica, estamos apenas declarando o código para renderizar os componentes na tela.

Até o próximo post! :)