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!