1. Caf com TOM: Ext JS 4 Loiane Groner @loiane http://loiane.com

2. http://sencha.com

3. Cross Browser Funciona at no IEca 6! No precisa car esquentando a cabea!

4. FcilIntegrao

5. Pode integrar cdigo!E outros....

6. Contruindoaplicaes ExtJS

7. Como organizar um projeto JS?

8. ExtJS 34k linhasde cdigo

9. Difcil de testarDifcil de manterDifcil de trabalhar em equipeDifcil de entender

10. Trabalho em EquipePessoas diferentes == trabalhodiferente preciso usar um padro

11. Cdigo precisa ser organizadoBoas prticas precisam ser seguidasEvitar confuso com verso decontrole

12. Model View Controller == MVC

13. ModelCarrega e Gerencia dados da appDados dos requests da View

14. ViewGerencia a visualizao dos dadosComponentes UI

15. ControllerGerencia inputs do usurioAtualiza o Model e View

16. Model

17. View

18. View

19. Controller

20. Benefcios do MVCEscalabilidadeMantenabilidadeFlexibilidade

21. Estrutura dos Arquivos

22. ModelExt.define(Egenial.model.Contato, { extend: Ext.data.Model, fields: [id, nome, phone, email]});

23. Ext.define(Egenial.store.Contatos, { extend: Ext.data.Store, model: Egenial.model.Contato, autoLoad: true, pageSize: 35, autoLoad: {start: 0, limit: 35}, proxy: { type: ajax, api: { read : contato/listar.action, create : contato/criar.action, update: contato/update.action,Store }, destroy: contato/delete.action reader: { type: json, root: data, successProperty: success }, writer: { type: json, writeAllFields: true, encode: false, root: data } } });

24. Ext.define(Egenial.view.contato.Grid ,{ extend: Ext.grid.Panel, alias : widget.contatogrid, requires: [Ext.toolbar.Paging], iconCls: icon-grid, title : Contatos, store: Contatos, columns: [{ header: "NOME", View - Grid width: 170, flex:1, dataIndex: nome },{ header: "TELEFONE", width: 160, flex:1, dataIndex: phone },{ header: "EMAIL", width: 170, flex:1, dataIndex: email }],

25. initComponent: function() { this.dockedItems = [{ xtype: toolbar, items: [{ iconCls: icon-save, itemId: add, text: Adicionar, action: add },{ iconCls: icon-delete, View - Grid text: Excluir, action: delete Parte 2 }]},{ xtype: pagingtoolbar, dock:top, store: Contatos, displayInfo: true, displayMsg: Mostrando Contatos {0} - {1} de {2}, emptyMsg: "Nenhum contato encontrado." }]; this.callParent(arguments); }});

26. Ext.define(Egenial.view.contato.Formulario, { extend: Ext.window.Window, alias : widget.contatoform, requires: [Ext.form.Panel,Ext.form.field.Text], title : Editar/Criar Contato, layout: fit, autoShow: true, width: 280, iconCls: icon-user, initComponent: function() { this.items = [{ xtype: form, padding: 5 5 0 5, border: false, style: background-color: #fff;,View - Form fieldDefaults: { anchor: 100%, labelAlign: left, allowBlank: false, combineErrors: true, msgTarget: side }, items: [{ xtype: textfield, name : id, fieldLabel: id, hidden:true },{ xtype: textfield, name : nome, fieldLabel: Nome },{ xtype: textfield, name : phone, fieldLabel: Telefone },{ xtype: textfield, name : email, fieldLabel: Email }] }];

27. this.dockedItems = [{ xtype: toolbar, dock: bottom, id:buttons, ui: footer, items: [->, { iconCls: icon-save,View - Form itemId: save, text: Salvar, action: saveParte 2 },{ iconCls: icon-reset, text: Cancelar, scope: this, handler: this.close }] }]; this.callParent(arguments); } });

28. ControllerExt.define(Egenial.controller.Contatos, { extend: Ext.app.Controller, stores: [Contatos], models: [Contato], views: [contato.Formulario, contato.Grid], refs: [{ ref: contatoPanel, selector: panel },{ ref: contatogrid, selector: contatogrid }],

29. Relao controller -> viewview -> eventos -> controller init: function() { this.control({ contatogrid dataview: { itemdblclick: this.editarContato }, contatogrid button[action=add]: { click: this.editarContato }, contatogrid button[action=delete]: { click: this.deleteContato }, contatogrid button[action=save]: { click: this.updateContato } }); },

30. editarContato: function(grid, record) { var edit = Ext.create(Egenial.view.contato.Formulario).show(); if(record){ edit.down(form).loadRecord(record); }},

31. updateContato: function(button) { var win = button.up(window), form = win.down(form), record = form.getRecord(), values = form.getValues(); if (values.id > 0){ record.set(values); } else{ record = Ext.create(Egenial.model.Contato); record.set(values); record.setId(0); this.getContatosStore().add(record); } win.close(); this.getContatosStore().sync();},

32. deleteContato: function(button) { var grid = this.getContatogrid(), record = grid.getSelectionModel().getSelection(), store = this.getContatosStore(); store.remove(record); this.getContatosStore().sync();}

33. app.js Ext.application({ name: Egenial, controllers: [ Contatos ], launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [{ xtype: contatogrid }] }); } });

34. Cdigo Fonte p/ Download https://github.com/loiane/ cafe-com-tom-extjs4

35. Para saber mais:Curso Gratuito ExtJS 4http://loiane.com

36. Para saber mais: http://amzn.com/ 1849516669 http:// www.packtpub.com/ ext-js-4-rst-look/ book

37. contato = { email: contato@loiane.com, blogPtBr: loiane.com, blogIngles: loianegroner.com, twitter: @loiane, github: loiane} Obrigada!

38. http://www.egenial.pro/pt/cafecomtom