Escolar Documentos
Profissional Documentos
Cultura Documentos
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 v
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
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
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!