[Curso de ExtJS 4] Aula 44: Apps MVC
-
Upload
loiane-groner -
Category
Technology
-
view
3.210 -
download
4
description
Transcript of [Curso de ExtJS 4] Aula 44: Apps MVC
![Page 1: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/1.jpg)
Curso Ext JS 4 Apps MVC
#44
![Page 2: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/2.jpg)
Agenda
• Introdução ao MVC
• Criando uma app MVC
![Page 3: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/3.jpg)
Requisitos
![Page 4: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/4.jpg)
Ext JS 4 SDK !
Sencha CMD * !
Servidor (Apache) !
Editor de Texto !
Browser (Firefox c/ Firebug ou Chrome)
![Page 5: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/5.jpg)
Model
View Controller
Usuário
![Page 6: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/6.jpg)
Model
![Page 7: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/7.jpg)
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'}!! ]!});!
![Page 8: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/8.jpg)
View
![Page 9: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/9.jpg)
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'!! ! }!! ]!});!
![Page 10: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/10.jpg)
Controller
![Page 11: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/11.jpg)
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();! }!});!
![Page 12: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/12.jpg)
Store
![Page 13: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/13.jpg)
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!! ! }!! }!});!
![Page 14: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/14.jpg)
http://www.loiane.com/2014/02/screencast-extjs-4-crud-mvc-passo-passo/
![Page 15: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/15.jpg)
![Page 16: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/16.jpg)
![Page 17: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/17.jpg)
Criando sua primeira app MVC
![Page 18: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/18.jpg)
Cuidado com problemas de compatibilidade de versão!!!
Dê preferência:!• Download última versão do ExtJS!• Download última versão do Cmd
![Page 19: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/19.jpg)
sencha generate app NomeApp ../DiretorioApp
![Page 20: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/20.jpg)
Show me the code!
![Page 21: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/21.jpg)
Lembre-se: a documentação é sua melhor amiga! ;)
![Page 23: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/23.jpg)
http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/
Link do Curso com todas as aulas
publicadas
![Page 26: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/26.jpg)
http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg
![Page 27: [Curso de ExtJS 4] Aula 44: Apps MVC](https://reader033.fdocuments.net/reader033/viewer/2022051609/5478eca6b37959492b8b45d7/html5/thumbnails/27.jpg)
Obrigada!