Ext JS 4 Apps MVC
•
0 gostou•5,046 visualizações
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.
Recomendados
Mais conteúdo relacionado
Semelhante a Ext JS 4 Apps MVC
Semelhante a Ext JS 4 Apps MVC (20)
Ext JS 4 Apps MVC
- 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)
- 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! }!
- 17. Criando sua primeira app MVC
- 18. Cuidado com problemas de compatibilidade de versão!! ! Dê preferência:! Download última versão do ExtJS! Download última versão do Cmd • •
- 19. sencha generate app NomeApp ../DiretorioApp
- 20. Show me the code!
- 21. Lembre-se: a documentação é sua melhor amiga! ;)
- 23. Link do Curso com todas as aulas publicadas http://www.loiane.com/2011/11/cursode-extjs-4-gratuito/
- 27. Obrigada!