Loiane Groner, profile picture
Carregado porLoiane Groner
PDF, PPTX5,057 visualizações

[Curso de ExtJS 4] Aula 44: Apps MVC

O documento apresenta um tutorial sobre como criar uma aplicação MVC (Model-View-Controller) em Ext JS 4. Ele explica os conceitos básicos de MVC, como definir Model, View e Controller e mostra um exemplo completo de uma aplicação CRUD (Create, Read, Update, Delete) para gestão de contatos.

Incorporar apresentação

Transferir como PDF, PPTX
Curso Ext JS 4 Apps MVC #44
Agenda • Introdução ao MVC • Criando uma app MVC
Requisitos
Ext JS 4 SDK ! Sencha CMD * ! Servidor (Apache) ! Editor de Texto ! Browser (Firefox c/ Firebug ou Chrome)
Usuário Model View Controller
Model
Ext.define('ExtMVC.model.Contato',{! ! extend: 'Ext.data.Model',! ! ! fields: [! ! ! {name: 'id', type: 'int'},! ! ! {name: 'email', type: 'string'},! ! ! {name: 'name', type: 'string'},! ! ! {name: 'phone', type: 'string'}! ! ]! });!
View
Ext.define('ExtMVC.view.ContatosGrid',{! ! extend: 'Ext.grid.Panel',! ! alias: 'widget.contatosgrid',! ! ! store: 'ExtMVC.store.Contatos',! ! title: 'Contatos',! ! iconCls: 'icon-grid',! ! ! ! ! columns: [! ! ! {! ! ! ! text: 'ID',! ! ! ! width: 35,! ! ! ! dataIndex: 'id'! ! ! },! ! ! {! ! ! ! text: 'Nome',! ! ! ! width: 170,! ! ! ! flex: 1,! ! ! ! dataIndex: 'name'! ! ! },! ! ! {! ! ! ! text: 'Telefone',! ! ! ! width: 100,! ! ! ! dataIndex: 'phone'! ! ! },! ! ! {! ! ! ! text: 'Email',! ! ! ! width: 170,! ! ! ! dataIndex: 'email'! ! ! }! ! ]! });!
Controller
Ext.define('ExtMVC.controller.Main', {! extend: 'Ext.app.Controller',! ! models: [! ! 'ExtMVC.model.Contato'! ],! ! stores: [! ! 'ExtMVC.store.Contatos'! ],! ! views: [! ! 'ExtMVC.view.ContatosGrid'! ],! ! init: function(application){! this.control({! "contatosgrid": {! render : this.onGridRender! }! });! },! ! onGridRender: function(grid, eOpts){! grid.getStore().load();! }! });!
Store
Ext.define('ExtMVC.store.Contatos',{! ! extend: 'Ext.data.Store',! ! ! model: 'ExtMVC.model.Contato',! ! pageSize: 20,! ! ! proxy: {! ! type: 'ajax',! ! ! ! ! ! ! ! ! ! ! ! ! api:{! ! create: 'php/criaContato.php',! ! read: 'php/listaContatos.php',! ! update: 'php/atualizaContato.php',! ! destroy: 'php/deletaContato.php',! },! ! ! ! ! ! ! ! ! reader: {! ! type: 'json',! ! root: 'data'! },! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! }! });! writer: {! ! type: 'json',! ! root: 'data',! ! encode: true! }!
http://www.loiane.com/2014/02/screencastextjs-4-crud-mvc-passo-passo/
Criando sua primeira app MVC
Cuidado com problemas de compatibilidade de versão!! ! Dê preferência:! Download última versão do ExtJS! Download última versão do Cmd • •
sencha generate app NomeApp ../DiretorioApp
Show me the code!
Lembre-se: a documentação é sua melhor amiga! ;)
Código Fonte da Aula https://github.com/loiane/ curso-extjs4
Link do Curso com todas as aulas publicadas http://www.loiane.com/2011/11/cursode-extjs-4-gratuito/
http://www.packtpub.com/
Dúvidas Técnicas? http://www.extjs.com.br
http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
Obrigada!

Mais conteúdo relacionado

PDF
Curso ExtJS 4 - Aula 05 - Criação de Classes
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 11 - Data Package: Model: Fields
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 21 - Data Package: Proxy Writer: CRUD Completo
porLoiane Groner
 
PDF
Aprendendo a arquitetura e novidades do ExtJS 4.2
porCristian Mathias
 
PDF
Curso ExtJS 4 - Aula 22: Data Package: REST Proxy
porLoiane Groner
 
ODP
Tw Course Ajax 2007 Ap05
porMilfont Consulting
 
PDF
Curso ExtJS 4 - Aula 15 - Data Package: Store
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
porLoiane Groner
 
Curso ExtJS 4 - Aula 05 - Criação de Classes
porLoiane Groner
 
Curso ExtJS 4 - Aula 11 - Data Package: Model: Fields
porLoiane Groner
 
Curso ExtJS 4 - Aula 21 - Data Package: Proxy Writer: CRUD Completo
porLoiane Groner
 
Aprendendo a arquitetura e novidades do ExtJS 4.2
porCristian Mathias
 
Curso ExtJS 4 - Aula 22: Data Package: REST Proxy
porLoiane Groner
 
Tw Course Ajax 2007 Ap05
porMilfont Consulting
 
Curso ExtJS 4 - Aula 15 - Data Package: Store
porLoiane Groner
 
Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
porLoiane Groner
 

Semelhante a [Curso de ExtJS 4] Aula 44: Apps MVC

PDF
School of Net Webinar: ExtJS 4
porLoiane Groner
 
PDF
Ext JS 4 em 5 Minutos - QCONSP 2011
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 19 - Data Package: Ajax Proxy
porLoiane Groner
 
PDF
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
porLoiane Groner
 
PDF
Curso de ExtJS 4 Aula 40: HBox Layout
porLoiane Groner
 
PDF
Curso extjs4-aula40
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 01 - Introdução
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 13 - Data Package: Proxy: Carregar e Salvar Model
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 41: VBox Layout
porLoiane Groner
 
PDF
Curso ExtJS 4 - Aula 33: Anchor Layout
porLoiane Groner
 
School of Net Webinar: ExtJS 4
porLoiane Groner
 
Ext JS 4 em 5 Minutos - QCONSP 2011
porLoiane Groner
 
Curso ExtJS 4 - Aula 19 - Data Package: Ajax Proxy
porLoiane Groner
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
porLoiane Groner
 
Curso de ExtJS 4 Aula 40: HBox Layout
porLoiane Groner
 
Curso extjs4-aula40
porLoiane Groner
 
Curso ExtJS 4 - Aula 01 - Introdução
porLoiane Groner
 
Curso ExtJS 4 - Aula 13 - Data Package: Proxy: Carregar e Salvar Model
porLoiane Groner
 
Curso ExtJS 4 - Aula 41: VBox Layout
porLoiane Groner
 
Curso ExtJS 4 - Aula 33: Anchor Layout
porLoiane Groner
 

[Curso de ExtJS 4] Aula 44: Apps MVC