Download - [Curso de ExtJS 4] Aula 44: Apps MVC
Curso Ext JS 4 Apps MVC
#44
Agenda
• Introdução ao MVC
• Criando uma app MVC
Requisitos
Ext JS 4 SDK !
Sencha CMD * !
Servidor (Apache) !
Editor de Texto !
Browser (Firefox c/ Firebug ou Chrome)
Model
View Controller
Usuário
Model
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'}!! ]!});!
View
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'!! ! }!! ]!});!
Controller
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();! }!});!
Store
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!! ! }!! }!});!
http://www.loiane.com/2014/02/screencast-extjs-4-crud-mvc-passo-passo/
Criando sua primeira app MVC
Cuidado com problemas de compatibilidade de versão!!!
Dê preferência:!• Download última versão do ExtJS!• Download última versão do Cmd
sencha generate app NomeApp ../DiretorioApp
Show me the code!
Lembre-se: a documentação é sua melhor amiga! ;)
http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/
Link do Curso com todas as aulas
publicadas
http://www.packtpub.com/
http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg
Obrigada!