Na linha 10 temos a declarao da config autoCreateViewport.

Se verdadeiro, a aplicao
vai instanciar a classe Viewport automaticamente. Para isso, temos que ter um ar
quivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewp
ort ou qualquer outro componente manualmente, pode utilizar a funo launch (ver doc
umentao para maiores detalhes: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Ap
plication).
Tambm possvel declarar todos os models, stores e views nesse arquivo de aplicao. No
curso de ExtJS 4 vamos aprender qual a diferena entre declarar ou no.
Existem outras opes de configurao tambm, consulte a documentao: http://docs.sencha.com
ext-js/4-1/#!/api/Ext.app.Application
Mas j que estamos usando oAgora que temos a estrutura da nossa aplicao completa, va
mos tentar entender o porqu de estruturamos a aplicao assim e o que vamos colocar e
m cada diretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tent
ar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em cada d
iretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tent
ar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em cada d
iretrio da pasta app.
O arquivo app.js o arquivNa linha 10 temos a declarao da config autoCreateViewport
. Se verdadeiro, a aplicao vai instanciar a classe Viewport automaticamente. Para
isso, temos que ter um arquivo chamado Viewport.js dentro da pasta app/view. Se
quiser instanciar o Viewport ou qualquer outro componente manualmente, pode util
izar a funo launch (ver documentao para maiores detalhes: http://docs.sencha.com/ext
-js/4-1/#!/api/Ext.app.Application).
Tambm possvel declarar todos os models, stores e views nesse arquivo de aplicao. No
curso de ExtJS 4 vamos aprender qual a diferena entre declarar ou no.
Existem outras opes de configurao tambm, consulte a documentao: http://docs.sencha.com
ext-js/4-1/#!/api/Ext.app.Application
Mas j que estamos usando oAgora que temos a estrutura da nossa aplicao completa, va
mos tentar entender o porqu de estruturamos a aplicao assim e o que vamos colocar e
m cada diretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg

ar quando iniciarmos a aplicao.

Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tent
ar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em cada d
iretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tent
ar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em cada d
iretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diret nesse diretrio vamos colocar todas as Stores da nossa aplicao. A
Store uma espcie de DAO, que vai se comunicar com o servidor ou alguma outra for
ma de storage local. A Store sempre carrega ou envia dados que representam uma c
oleo de instncias de Models de um mesmo tipo.
view: nesse diretrio vamosina HTML da nossa aplicao. E sim, no importa o tamanho da
nossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com
os componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tent
ar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em cada d
iretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tent
ar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em cada d
iretrio da pasta app.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML

para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diret nesse diretrio vamos colocar todas as Stores da nossa aplicao. A
Store uma espcie de DAO, que vai se comunicar com o servidor ou alguma outra for
ma de storage local. A Store sempre carrega ou envia dados que representam uma c
oleo de instncias de Models de um mesmo tipo.
view: nesse diretrio vamos colocar todas as nossas views que so os componentes em
si, como grid, tree, form, grficos, etc. Nos arquivos vamos colocar apenas o cdigo
para renderizar a view, no vamos tratar nenhum tipo de interao do usurio (exemplo:
clique de boto).
controller: nesse diretrio vamos colocar todos os nossos controllers. Os controll
ers so responsveis por ficar de olho em tudo o que acontece na aplicao e so nesses arq
ivos que vamos colocar toda a lgica de controle das views, models e stores.
Estrutura MVC
Agora que temos a estrutura da nossa aplicao completa, vamos tentar entender o por
qu de estruturamos a aplicao assim e o que vamos colocar em cada diretrio da pasta a
pp.
Se voc ainda no sabe o que MVC e para que serve, por favor, leia esse artigo: http
://pt.wikipedia.org/wiki/MVC
O arquivo index.html a pgina HTML da nossa aplicao. E sim, no importa o tamanho da n
ossa aplicao que teremos apenas essa pgina HTML. Com ExtJS no criamos uma pgina HTML
para coisa que queremos fazer. Se tivermos uma aplicao grande, vamos brincar com o
s componentes para decidir o que vai ser mostrado ou no.
O arquivo app.js o arquivo que representa a nossa aplicao. nele que vamos dizer o
nome da nossa aplicao, e tambm vamos dizer qual ser o componente que queremos carreg
ar quando iniciarmos a aplicao.
Dntro do diretrio app temos os seguintes diretrios:
odel: nesse diretrio vamos colocar todos os Models da nossa aplicao. Um Model a rep
resentao do dado que vamos trabalhar e seus campos.
store: nesse diretrio vamos colocar todas as Stores da nossa aplicao. A Store uma e
spcie de DAO, que vai se comunicar com o servidor ou alguma outra forma de storag
e local. A Store sempre carrega ou envia dados que representam uma coleo de instnci
as de Models de um mesmo tipo.
view: nesse diretrio vamos colocar todas as nossas views que so os componentes em
si, como grid, tree, form, grficos, etc. Nos arquivos vamos colocar apenas o cdigo
para renderizar a view, no vamos tratar nenhum tipo de interao do usurio (exemplo:
clique de boto).
controller: nesse diretrio vamos colocar todos os nossos controllers. Os controll
ers so responsveis por ficar de olho em tudo o que acontece na aplicao e so nesses arq
ivos que vamos colocar toda a lgica de controle das views, models e stores.
Se voc ainda no sabe o que um Model, Store, etc, assista as aulas do curso gratuit
o de ExtJS 4 para entender melhor como eles funcionam: http://www.loiane.com/201
1/11/curso-de-extjs-4-gratuito/
4 Pgina HTML
Como o ExtJS vai fazer tudo pela gente, a pgina HTML apenas precisa de ter o impo
rt/include dos arquivos CSS (do ExtJS e o que criamos), e do SDK do ExtJS 4, e d
o arquivo app.js. No final, vai ficar assim:
<html>
<head>
<title>Ext JS 4 Examples - loiane.com</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css
">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<!-- App Files -->

<link rel="stylesheet" type="text/css" href="resources/css/app.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
5 Criando a App e o Viewport

Nesse passo vamos adicionar cdigo ao arquivo app.js:

Ext.Loader.setConfig({enabled: true});
Ext.application({
name: 'ExtMVC',
controllers: [
'Contatos'
],
autoCreateViewport: true
});
Na linha 1 temos o Loader que responsvel pelo carregamento dinmico.
Na linha 3 temos a declarao da classe da nossa aplicao.
Na linha 4 temos a declarao do nome da nossa aplicao, tambm conhecido como namespace.
A conveno para a criao do namespace usando camelcase, a mesma usada para a criao de
ome de classes.
Linhas 6 a 8 temos a declarao dos controllers utilizados na applicao.
Na linha 10 temos a declarao da config autoCreateViewport. Se verdadeiro, a aplicao
vai instanciar a classe Viewport automaticamente. Para isso, temos que ter um ar
quivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewp
ort ou qualquer outro componente manualmente, pode utilizar a funo launch (ver doc
umentao para maiores detalhes: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Ap
plication).
Tambm possvel declarar todos os models, stores e views nesse arquivo de aplicao. No
curso de ExtJS 4 vamos aprender qual a diferena entre declarar ou no.
Existem outras opes de configurao tambm, consulte a documentao: http://docs.sencha.com
ext-js/4-1/#!/api/Ext.app.Application
Mas j que estamos usando o autoCreateViewport como true (particularmente acho bem
melhor assim do que usar a funo launch), temos que criar o arquivo Viewport.js de
ntro da pasta app/view:
Ext.define('ExtMVC.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',
requires: [
'ExtMVC.view.contato.Grid',
'ExtMVC.view.contato.Formulario'
],
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [
{
xtype: 'contatogrid'
}
]
});
me.callParent(arguments);

}
});
Alguns pontos chamam ateno nesse arquivo:
Na linha 1 temos a declarao do nome da classe: ExtMVC.view.Viewport:
ExtMVC pois nome da nossa aplicao que declaramos na linha 4 do arquivo app.js;
view pois o nome do pacote (diretrio view);
Viewport, pois o nosso arquivo se chama Viewport.js;
Na linha 16 temos a declarao do xtype contatogrid, que o alias do Grid que iremos
criar; que ser o nico componente a ser mostrado na tela para o usurio (por isso est
amos usando um layout do tipo fit).
Com tudo o que fizemos nesse post, j temos o esqueleto do projeto, que vamos cont
inuar a desenvolver no prximo post!