Introdução ao padrão MVC no Ext JS 4

gustavohenrique — Mon, 27 Feb 2012 11:17:47 +0000

Ext JS 4 trouxe uma nova maneira de construir interfaces ricas com a introdução do padrão MVC. Ao permtir a separação das regras de negócios e componentes visuais é obtido um código mais limpo e fácil de dar manuntenção.

A arquitetura do padrão MVC usado pelo extjs4 é definido da seguinte maneira:

Model: é uma classe que representa uma tabela do banco de dados.
View: é um componente visual como por exemplo datagrid, combobox, panel…
Controller: é onde fica o código que faz a aplicação funcionar. Serve como uma ponte entre o Model e a View, possui regras de negócio e renderiza componentes.

ExtJS utiliza convenções para facilitar a vida do desenvolvedor.

Estrutura de arquivos:
Um diretório app para cada projeto e dentro dele os diretórios model, controller, view e store. O arquivo app.js no mesmo nível do diretório app.
Dentro do diretório view deve ser criado um subdiretório com o nome de cada controller que renderiza alguma view.

Nomes de arquivos:

Models: CamelCase no singular.
View: um subdiretório com o nome do controller em minúsculo e dentro CamelCase para o nome do componente.
Controllers: CamelCase no plural.
Stores: CamelCase no plural.

Como exemplo, vou mostrar como criar um projeto usando a estrutura abaixo:

Primeiramente instale um servidor web tal como Apache ou Nginx. A configuração padrão já é suficiente para o propósito desse artigo. Faça o download da versão gratuita do ExtJS 4 em http://www.sencha.com/products/extjs/download?page=a.

$ mkdir -p /var/www/html/extjs4-mvc-tutorial/js
$ cd /var/www/html/extjs4-mvc-tutorial/js
$ wget http://cdn.sencha.io/ext-4.0.7-gpl.zip
$ unzip ext-4.0.7-gpl.zip
$ mkdir -p app/model
$ mkdir -p app/controller
$ mkdir -p app/view/contatos
$ mkdir -p app/store

Crie o arquivo /var/www/html/extjs4-mvc-tutorial/index.html:



  
  Ext JS 4 MVC Tutorial
  
  < type="text/java" src="js/ext-4.0.7-gpl/ext-all-debug.js">
  < type="text/java" src="js/app.js">

Agora o arquivo /var/www/html/extjs4-mvc-tutorial/js/app.js:

Ext.Loader.setConfig({enabled:true});
Ext.application({
    name: 'extjs4-mvc-tutorial',
    appFolder: '/extjs4-mvc-tutorial/js/app',
    autoCreateViewport: false,
 
    controllers: ['Contatos',],
 
    launch: function() {
        viewport = Ext.create('Ext.container.Viewport', {
            id: 'viewport',
            layout: 'border',
            items: [{
                region: 'center',
                border: false,
                autoScroll: true,
                items: [{
                    xtype: 'contatosGrid',
                    store: 'Contatos',
                }]
            }]
        });
    }
});

app.js cria a aplicação extjs4-mvc-tutorial e define o caminho da appFolder. autoCreateViewport: false permite que eu crie uma viewport assim que a aplicação for criada.
A linha Ext.Loader.setConfig({enabled:true}) é necessária para o carregamento dinâmico das dependências do projeto.
Adicionei um controller na aplicação. Devido a convenção utilizada, extjs sabe exatamente onde onde procurar essa classe controller dentro do appFolder. Ao carregar o controller dinamicante, suas dependências também são carregadas, como por exemplo o store Contatos e a view contatosGrid.

Crie o model /var/www/html/extjs4-mvc-tutorial/js/app/model/Pessoa.js

Ext.define('extjs4-mvc-tutorial.model.Pessoa', {
    extend: 'Ext.data.Model',
    fields: ['id', 'email'],
});

Um model extende de Ext.data.Model e automaticamente ganha os métodos set() e get(). Na versão 4 é possível inserir um Proxy dentro do Model e com isso obtém um funcionamento semelhante ao padrão Active Record.

Crie também a store /var/www/html/extjs4-mvc-tutorial/js/app/store/Contatos.js

Ext.define('extjs4-mvc-tutorial.store.Contatos', {
    extend: 'Ext.data.Store',
 
    model: 'extjs4-mvc-tutorial.model.Pessoa',
    autoLoad: true,
    autoSync: true,
    pageSize: 30,
 
    proxy: {
        type: 'rest',
 
        api: {
            read: '/extjs4-mvc-tutorial/contatos/read',
            create: '/extjs4-mvc-tutorial/contatos/create',
            update: '/extjs4-mvc-tutorial/contatos/update',
            destroy: '/extjs4-mvc-tutorial/contatos/delete'
        },
 
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success',
            totalProperty: 'total'
        },
 
        writer: {
            type: 'json',
            root: 'data',
        },
 
        listeners: {
            exception: function(proxy, response, operation) {
                var message = Ext.JSON.decode(response.responseText).message;
                Ext.Msg.alert('Ocorreu um erro', message);
            }
        }
    },
});

Crie a view /var/www/html/extjs4-mvc-tutorial/js/app/view/contatos/Grid.js

Ext.define('extjs4-mvc-tutorial.view.contatos.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.contatosGrid',
 
    plugins: Ext.create('Ext.grid.plugin.CellEditing'),
 
    columns: [{
        xtype: 'rownumberer',
        width: 30,
    }, {
        text: 'Nome',
        sortable: true,
        dataIndex: 'nome',
        field: {
            xtype: 'textfield'
        }
    }, {
        text: 'E-mail',
        flex: 0,
        sortable: false,
        dataIndex: 'email',
        width: 120,
        field: {
            xtype: 'textfield'
        }
    }],
 
    initComponent: function() {
        this.dockedItems = [{
            xtype: 'toolbar',
            items: [{
                text: 'Adicionar',
                action: 'adicionar'
            }, {
                text: 'Deletar',
                action: 'deletar'
            }]
        }, {
            store: this.getStore(),
            displayInfo: true,
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            beforePageText : 'Pagina ',
            displayMsg: '{0} - {1} de {2}',
            emptyMsg: 'Nada para ser exibido',
        }];
        return this.callParent(arguments);
    },
});

A linha plugins: Ext.create('Ext.grid.plugin.CellEditing') adiciona o plugin para editar células no grid.

Por fim, crie o controller /var/www/html/extjs4-mvc-tutorial/js/app/controller/Contatos.js:

Ext.define('extjs4-mvc-tutorial.controller.Contatos', {
    extend: 'Ext.app.Controller',
 
    models: ['Pessoa'],
    stores: ['Contatos'],
    views : ['contatos.Grid',],
 
    init: function() {
        this.control({
            'contatosGrid button[action=adicionar]': {click: this.adicionar},
            'contatosGrid button[action=deletar]': {click: this.deletar},
        });
    },
 
    adicionar: function(button) {
        button.up('grid').getStore().insert(0, this.getModel('Pessoa').create());
    },
 
    deletar: function(button) {
        var grid = button.up('grid'),
            store = grid.getStore(),
            record = grid.getSelectionModel().getSelection()[0];
 
        if (record) {
            if (confirm('Tem certeza?')) {
                store.remove(record);
            }
        }
    }
});

O controller contém a lógica da aplicação, isolando o model e a view.
Para testar esse exemplo, crie o arquivo /var/www/html/extjs4-mvc-tutorial/contatos/read contendo:

$ vim /var/www/html/extjs4-mvc-tutorial/contatos/read
{ success: true, total: 1, data: [{ 'id': 1, 'nome': 'Gustavo', 'email': 'eu@gustavohenrique.net' }] }

Ao carregar a aplicação será exibido no grid o conteúdo do arquivo acima.

Como não foi utilizada nenhuma linguagem de backend, ao tentar cadastrar, deletar ou atualizar um registro no grid ocasionará um erro 404. Mas se testar no firefox ou chrome usando o firebug vai perceber que são enviados requests do tipo POST, DELETE e PUT, afinal o proxy na store foi configurado para trabalhar como REST.

Links

http://docs.sencha.com/ext-js/4-0/
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1

Apresentando a ExtJS

gustavohenrique — Sat, 19 Dec 2009 13:08:06 +0000

layout usando componentes da ExtJS

ExtJS é uma biblioteca Javascript para criar aplicações ricas para internet (Rich Internet Application). Com ela é possível construir interfaces gráficas com aparência de uma aplicação para desktop. Suas principais características são:

Alta performance e possibilidade de customizar componentes
Bem desenhada, documentada e as classes dos componentes são
extensíveis
Possui uma versão Open Source
Pode trabalhar em conjunto com outras bibliotecas como JQuery,
Mootools, Protoype…
Fácil de usar
Integração entre cada um dos seus componentes

Exemplos de Componentes

Grid

Um Grid é uma ótima maneira de apresentar uma listagem de dados. A ExtJS provê avançados recursos para construção de grids, como células editáveis, agrupamento de dados, paginação de resultado, barra de ferramentas, utilização de imagens, ordenação por campo, etc.

Grid simples

Window

É possível criar janelas que podem ser redimensionadas, maximizadas, minimizadas e arrastadas. Também podem ser modais ou não modais. Um janela pode conter outros componentes como grid, tabs, forms, etc.

Window contendo TabPanel

Form

Componente para criação de formulários. Cada campo do form pode conter regras de validação que podem ser customizadas. Por padrão, um Form envia os dados no modo ajax (via POST usando o formato JSON).

Form simples

Tree

Estrutura em forma de árvore semelhante ao Windows Explorer.
Pode usar imagens como ícones e o recurso de arrastar e soltar para movimentar os elementos.

TreePanel padrão

Toolbar e Menu

Barra de ferramentas e menus também podem ser utilizados dentro de outros elementos, como Window e GridPanel.

Toolbar e MenuBar

Conclusão

A idéia desse texto foi apenas despertar a curiosidade sobre essa incrível biblioteca Javascript. Há muito mais recursos e exemplos que não mencionei, mas que podem ser vistos no site do projeto.
Tenho utilizado bastante em projetos de sistemas web em conjunto com o Django e com isso consegui mais agilidade já que não preciso mais me preocupar com assuntos referentes ao design, como cores e tipografia.

Sites relacionados:

GustavoHenrique.net » extjs