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 nome 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 arquivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewport ou qualquer outro componente manualmente, pode utilizar 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.ApplicationMas 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 dentro da pasta app/view:Ext.define('ExtMVC.view.VNa 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 nome 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 arquivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewport ou qualquer outro componente manualmente, pode utilizar 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.ApplicationMas 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 dentro da pasta app/view:Ext.define('ExtMVC.view.VNa 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 nome 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 arquivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewport ou qualquer outro componente manualmente, pode utilizar 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.ApplicationMas j que estamos usando oNa 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 nome 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 arquivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewport ou qualquer outro componente manualmente, pode utilizar 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.ApplicationMas j que estamos usando oAgora que temos a estrutura da nossa aplicao completa, vamos tentar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em 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/MVCO arquivo index.html a pgina 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 carregar quando iniciarmos a aplicao.Dntro do diretrio app temos os seguintes diretrios:odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tentar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em 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/MVCO arquivo index.html a pgina 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 carregar quando iniciarmos a aplicao.Dntro do diretrio app temos os seguintes diretrios:odel: nesse diretAgora que temos a estrutura da nossa aplicao completa, vamos tentar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em 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/MVCO arquivo index.html a pgina 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 carregar 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 forma de storage local. A Store sempre carrega ou envia dados que representam uma coleo 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 controllers so responsveis por ficar de olho em tudo o que acontece na aplicao e so nesses arquivos que vamos colocar toda a lgica de controle das views, models e stores.Estrutura MVCAgora que temos a estrutura da nossa aplicao completa, vamos tentar entender o porqu de estruturamos a aplicao assim e o que vamos colocar em 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/MVCO arquivo index.html a pgina 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 carregar 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 representao do dado que vamos trabalhar e seus campos.store: 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 forma de storage local. A Store sempre carrega ou envia dados que representam uma coleo 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 controllers so responsveis por ficar de olho em tudo o que acontece na aplicao e so nesses arquivos 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 gratuito de ExtJS 4 para entender melhor como eles funcionam: http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/4 Pgina HTMLComo o ExtJS vai fazer tudo pela gente, a pgina HTML apenas precisa de ter o import/include dos arquivos CSS (do ExtJS e o que criamos), e do SDK do ExtJS 4, e do arquivo app.js. No final, vai ficar assim:

Ext JS 4 Examples - loiane.com

5 Criando a App e o ViewportNesse 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 nome 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 arquivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewport ou qualquer outro componente manualmente, pode utilizar 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.ApplicationMas 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 dentro 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 estamos usando um layout do tipo fit).Com tudo o que fizemos nesse post, j temos o esqueleto do projeto, que vamos continuar a desenvolver no prximo post!