[Curso de ExtJS 4] Aula 44: Apps MVC

Click here to load reader

  • date post

    29-Nov-2014
  • Category

    Technology

  • view

    3.204
  • download

    4

Embed Size (px)

description

 

Transcript of [Curso de ExtJS 4] Aula 44: Apps MVC

  • 1. Curso Ext JS 4 Apps MVC #44
  • 2. Agenda Introduo ao MVC Criando uma app MVC
  • 3. Requisitos
  • 4. Ext JS 4 SDK ! Sencha CMD * ! Servidor (Apache) ! Editor de Texto ! Browser (Firefox c/ Firebug ou Chrome)
  • 5. Usurio Model View Controller
  • 6. Model
  • 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. View
  • 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. Controller
  • 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. Store
  • 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. http://www.loiane.com/2014/02/screencastextjs-4-crud-mvc-passo-passo/
  • 15. Criando sua primeira app MVC
  • 16. Cuidado com problemas de compatibilidade de verso!! ! D preferncia:! Download ltima verso do ExtJS! Download ltima verso do Cmd
  • 17. sencha generate app NomeApp ../DiretorioApp
  • 18. Show me the code!
  • 19. Lembre-se: a documentao sua melhor amiga! ;)
  • 20. Cdigo Fonte da Aula https://github.com/loiane/ curso-extjs4
  • 21. Link do Curso com todas as aulas publicadas http://www.loiane.com/2011/11/cursode-extjs-4-gratuito/
  • 22. http://www.packtpub.com/
  • 23. Dvidas Tcnicas? http://www.extjs.com.br
  • 24. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  • 25. Obrigada!