Sorry, this entry is only available in Português.

No post anterior iniciamos a estrutura da nossa aplicação de blog. Agora vamos ver melhor a respeito da arquitetura MVC do Ext JS 4.

Model

1. Criar model no arquivo app/model/Post.js

Ext.define('EB.model.Post', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',		type: 'int'     },
        {name: 'title',		type: 'string'  },
        {name: 'content',	type: 'string'  }
    ],
	proxy: {
		type: 'ajax',
        url: 'data/posts.json',
        reader: {
            type: 'json',
			root: 'posts',
			idProperty: 'id'
        }
    }
});

2. Criar store no arquivo app/store/Posts.js

Ext.define('EB.store.Posts', {
    extend      : 'Ext.data.Store',
    model       : 'EB.model.Post'
});

3. Criar dados fictícios no arquivo data/posts.json

{
	"posts": [
		{"id":1, "title": "Post 1", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id nisl tellus, nec pretium tortor. Duis luctus posuere felis vitae viverra. Vivamus nisl purus, pulvinar eget rhoncus et, mattis nec leo. Donec sagittis ultrices molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."},
		{"id":2, "title": "Post 2", "content": "In hac habitasse platea dictumst. Nam commodo, augue id consequat ultricies, lacus augue pharetra odio, in aliquet neque magna vitae ipsum. Praesent porta dictum nibh, quis aliquam tortor volutpat nec. Nulla egestas nibh ac neque congue eu commodo dui elementum. Sed interdum massa sit amet odio aliquet at blandit mauris condimentum."},
		{"id":3, "title": "Post 3", "content": "Vestibulum commodo pellentesque sagittis. Nullam sed venenatis mi. Etiam convallis turpis at velit faucibus lobortis. Sed pretium viverra dui vitae adipiscing. Quisque mattis mollis lectus. Nullam a convallis sapien. Donec vitae eleifend ipsum. Nam tortor ipsum, ultrices eget feugiat nec, sodales et magna."}
	]
}

Fazendo desta forma a nossa camada de dados está pronta. Temos um model, aonde descrevemos os campos que o compõem, e o proxy que fará a conexão com o servidor. Definimos também o reader, que é o responsável por traduzir os dados que vêm do servidor para que o Ext possa criar as instâncias do model.

View

Agora vamos criar a listagem de posts, no arquivo app/view/post/List.js

Ext.define('EB.view.post.List',{
    extend  : 'Ext.view.View',
    alias   : 'widget.postlist',
    
//inits
    initComponent: function()
    {
        Ext.apply(this,{
			title		: 'Posts',
			store		: 'Posts',
			itemSelector: 'div.post-wrap',
			tpl			: new Ext.XTemplate(
			    '<tpl for=".">',
					'<div style="margin-bottom: 10px;" class="post-wrap">',
						'<h2>{title}</h2>',
						'<p>{content}</p>',
			        '</div>',
			    '</tpl>'
			)
		});
        
		this.callParent(arguments);
		this.store.load();
    }
});

EB.view.post.List é uma view bem simples. Ela extende de Ext.view.View, definindo o store e também o template utilizado para essa listagem. Vamos deixar os links de edição e exlusão de fora por enquanto.

Controller

Este é a parte responsável por juntar models, stores, views, e adicionar os eventos e interações. Por enquanto não vamos definir os eventos, vamos só criar o arquivo app/controller/Posts.js e juntar todas as partes

Ext.define('EB.controller.Posts', {
    extend  : 'Ext.app.Controller',
    views   : ['post.List'],
    models  : ['Post'],
	stores	: ['Posts']
});

Unindo as partes

Vamos adicionar o controller Posts à nossa definição de application em app.js

Ext.application({
    name: 'EB',					//app namespace (from ExtBlog)
    controllers: ['Posts'],		//here goes the controllers
    autoCreateViewport: true	//automatically creates Viewport
});

O app.js é nosso arquivo de entrada. Ele irá disparar o carregamento de controller definido em app/controller/Posts.js. Como dentro do nosso controller nós indicamos suas views, models e stores envolvidas, estes também serão carregados. No final temos tudo carregado e pronto para o uso!

Basta agora adicionar nossa listagem de posts ao Viewport, usando diretamente o alias postlist

//...	
	xtype: 'tabpanel',
	region: 'center',
	items: [{
		xtype: 'postlist'
	},{
		title: 'Post 1',
		html: '...post 1...'
	}]
//...

Como resultado já podemos ver nossa listagem de arquivos sendo carregada. A estrutura MVC do Ext 4 permite que cada diferente parte de uma interface seja definida no seu devido lugar.

Apesar de termos já uma listagem, ainda falta interação para abrir o post e também as regras SASS para deixar a interface do jeito que queremos. Tudo isso será feito no próximo post!

Sorry, this entry is only available in Português.

Demorei um pouco pra ter um contato significativo com essa nova versão por causa de várias tarefas, mas agora que estou neste ponto, acho útil compartilhar experiências com a comunidade. Este post é dedicado a todos que, assim como eu, estão passando pela transição Ext 3 – 4, e precisam ficar procurando na documentação, nos fóruns e na web como um todo, por material de estudo e explicações para problemas simples.

Para ficar bem elucidado, vou criar uma aplicação simples de Blog. O sistema final deve ser parecido com o rascunho abaixo. Ele é composto de um painel para ler posts, e um menu lateral com recursos adicionais. Ao clicar em um post ele ganhará destaque, e links para edição e remoção serão mostrados. Ao clicar duas vezes uma nova aba será aberta. Na lateral poderemos filtrar por categoria ou data, e ainda teremos a opção de criar um novo post, o que abrirá uma nova janela. Apesar de ser um sistema básico, consigo através dele abordar os componentes mais usados.

Set Up

1. Criar a estrutura de diretórios conforme especificado na documentação oficial

Estrutura Diretórios

O diretório principal recebe o nome que você desejar (algo relacionado a sua aplicação obviamente). No meu caso vou chamar de extblog, por esse projeto se tratar de um blog escrito em Ext. O diretório extblog/app, e seus subdiretórios controller, model, store e view são padrões do Ext. Temos ainda o diretório extblog/ext-4.0, com os fontes do Ext (não todos! Eu por enquanto estou copiando só o ext.js, ext-dev.js, e os subdiretórios src e resources). E por fim o diretório extblog/resources aonde colocamos arquivos estáticos como imagens e SASS

2. Criar os arquivos de entrada index.html e app.js

O nosso arquivo index.html não tem muito segredo. Ele vai ser o mais simples possível, contendo somente a inclusão do arquivo CSS do Ext, o próprio JS do Ext, e um arquivo chamado app.js.

<html>
<head>
    <title>ExtBlog</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.0/ext-dev.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js é uma novidade da versão 4. Ele é o arquivo de entrada padrão, contendo dados a respeito da inicialização da sua aplicação. Nele você informa o namespace da sua aplicação, e também quais os controllers existentes. Por enquanto só vou ter o namespace.

Ext.Loader.setPath('Ext', 'ext-4.0/src');
Ext.Loader.setConfig({enabled: true});

Ext.application({
    name: 'EB',			//app namespace (from ExtBlog)
    controllers: []		//here goes the controllers
});

Fazendo essa definição inicial já é possível acessar o aplicativo e verificar pelo firebug que tudo está sendo carregado corretamente.

Como estamos utilizando a versão de desenvolvimento do Ext (ext-dev.js), é importante dizer aonde os arquivos se encontram, e também ativar o carregamento dinâmico. Isso ocorre nas 2 primeiras linhas, usando Ext.Loader

O sistema de carregamento dinâmico permite que somente as classes que realmente estão sendo utilizadas pela nossa aplicação sejam usadas. Quando chegarmos no processo de deploy, iremos utilizar a ferramenta Sencha SDK para concatenar e compactar todos arquivos em um único. Por causa desse carregamento dinâmico é temos alguns outros arquivos JS que não incluímos no HTML sendo carregados.

Viewport

Agora que temos o nosso projeto rodando, podemos começar a desenvolver a interface, criando o Viewport. Ext.Application possui uma configuração autoCreateViewport. Quando true, o Ext procura o arquivo Viewport.js e já o instancia. Então o que faremos é adicionar essa configuração em app.js e criar o arquivo app/view/Viewport.js.

Ext.define('EB.view.Viewport', {
    extend: 'Ext.container.Viewport',
	
	layout: 'border',
	padding: 5,
	
	items: [{
		xtype: 'container',
		html: 'ExtBlog by Bruno Tavares',
		region: 'north',
		height:40
	},{
		xtype: 'tabpanel',
		region: 'center',
		items: [{
			title: 'Posts',
			html: '...here goes the posts...'
		},{
			title: 'Post 1',
			html: '...post 1...'
		}]
	},{
		xtype: 'panel',
		region: 'east',
		html: '...here goes additional resources...',
		split: true,
		width: 400
	}]
});

Nessa primeira classe já é possível visualizar a nova sintaxe do Ext 4; a classe é definida por Ext.define.

Se você seguiu tudo certinho até aqui, ao tentar visualizar o viewport no navegador, pode perceber algumas mensagens de aviso como estas:

Aviso: você esqueceu uma dependência...

Por causa do carregamento dinâmico, devemos informar quais as classes que nossas interfaces fazem uso. Não se preocupe se você esquecer alguma dependência enquanto desenvolve, ou não souber delas. O Ext vai carregar ela de forma síncrona e emitir este aviso no console de depuração. Para isso seu navegador deve possuir este recurso (sugiro firefox + firebug), e você deve estar utilizando a versão -dev.js do Ext.

Para resolver com isto, basta ir adicionando os requisitos em app.js

Ext.Loader.setPath('Ext', 'ext-4.0/src');
Ext.Loader.setConfig({enabled: true});

Ext.require(
	'Ext.layout.container.Border',
	'Ext.tab.Panel'
);
	
Ext.application({
    name: 'EB',					//app namespace (from ExtBlog)
    models: [],					//here goes the models
    controllers: [],			//here goes the controllers
    autoCreateViewport: true	//automatically creates Viewport
});

No próximo post

No próximo post (Construindo um aplicativo com Ext 4 – Parte 2) vamos criar nossos models, view e controllers. Ficamos por aqui com o setup básico de um projeto em Ext 4, já conseguindo visualizar a estrutura básica do sistema. Segue também link para download dos fontes e exemplo online. Até em breve!

Código Completo

Demo Online