[Curso de ExtJS 4] Aula 44: Apps MVC

4,372 views
4,384 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,372
On SlideShare
0
From Embeds
0
Number of Embeds
3,679
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[Curso de ExtJS 4] Aula 44: Apps MVC

  1. 1. Curso Ext JS 4 Apps MVC #44
  2. 2. Agenda • Introdução ao MVC • Criando uma app MVC
  3. 3. Requisitos
  4. 4. Ext JS 4 SDK ! Sencha CMD * ! Servidor (Apache) ! Editor de Texto ! Browser (Firefox c/ Firebug ou Chrome)
  5. 5. Usuário Model View Controller
  6. 6. Model
  7. 7. 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'}! ! ]! });!
  8. 8. View
  9. 9. 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'! ! ! }! ! ]! });!
  10. 10. Controller
  11. 11. 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();! }! });!
  12. 12. Store
  13. 13. 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! }!
  14. 14. http://www.loiane.com/2014/02/screencastextjs-4-crud-mvc-passo-passo/
  15. 15. Criando sua primeira app MVC
  16. 16. Cuidado com problemas de compatibilidade de versão!! ! Dê preferência:! Download última versão do ExtJS! Download última versão do Cmd • •
  17. 17. sencha generate app NomeApp ../DiretorioApp
  18. 18. Show me the code!
  19. 19. Lembre-se: a documentação é sua melhor amiga! ;)
  20. 20. Código Fonte da Aula https://github.com/loiane/ curso-extjs4
  21. 21. Link do Curso com todas as aulas publicadas http://www.loiane.com/2011/11/cursode-extjs-4-gratuito/
  22. 22. http://www.packtpub.com/
  23. 23. Dúvidas Técnicas? http://www.extjs.com.br
  24. 24. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  25. 25. Obrigada!

×