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! ;)

https://github.com/loiane/curso-extjs4

Código Fonte da Aula

http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/

Link do Curso com todas as aulas

publicadas

http://www.packtpub.com/

Dúvidas Técnicas?

http://www.extjs.com.br

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Obrigada!