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:
- Preparando o Ambiente e montando o Projeto (Parte 1)
- Criando o Model e Store (Parte 2)
- Criando a View - Grid (Parte 3)
- Criando a View - Formulário (Parte 4)
- Criando o Controller (Parte 5)
A quarta parte inclui:
- 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 view – view/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! :)
