Your SlideShare is downloading. ×
0
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
[Curso de ExtJS 4] Aula 44: Apps MVC
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[Curso de ExtJS 4] Aula 44: Apps MVC

3,977

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
3,977
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Curso Ext JS 4 Apps MVC #44
  • 2. Agenda • Introdução 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. Usuário 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 versão!! ! Dê preferência:! Download última versão do ExtJS! Download última versão do Cmd • •
  • 17. sencha generate app NomeApp ../DiretorioApp
  • 18. Show me the code!
  • 19. Lembre-se: a documentação é sua melhor amiga! ;)
  • 20. Código 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. Dúvidas Técnicas? http://www.extjs.com.br
  • 24. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  • 25. Obrigada!

×