Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cafe com Tom - ExtJS 4

1,555 views

Published on

Café com Tom da Egenial - 04/fev/2012

Published in: Technology
  • Be the first to comment

Cafe com Tom - ExtJS 4

  1. 1. Café com TOM: Ext JS 4 Loiane Groner @loiane http://loiane.com
  2. 2. http://sencha.com
  3. 3. Cross Browser Funciona até no IEca 6! Não precisa ficar esquentando a cabeça!
  4. 4. FácilIntegração
  5. 5. Pode integrar código!E outros....
  6. 6. Contruindoaplicações ExtJS
  7. 7. Como organizar um projeto JS?
  8. 8. ExtJS 34k linhasde código
  9. 9. Difícil de testarDifícil de manterDifícil de trabalhar em equipeDifícil de entender
  10. 10. Trabalho em EquipePessoas diferentes == trabalhodiferenteÉ preciso usar um padrão
  11. 11. Código precisa ser organizadoBoas práticas precisam ser seguidasEvitar confusão com versão decontrole
  12. 12. Model View Controller == MVC
  13. 13. ModelCarrega e Gerencia dados da appDados dos requests da View
  14. 14. ViewGerencia a visualização dos dadosComponentes UI
  15. 15. ControllerGerencia inputs do usuárioAtualiza o Model e View
  16. 16. Model
  17. 17. View
  18. 18. View
  19. 19. Controller
  20. 20. Benefícios do MVCEscalabilidadeMantenabilidadeFlexibilidade
  21. 21. Estrutura dos Arquivos
  22. 22. ModelExt.define(Egenial.model.Contato, { extend: Ext.data.Model, fields: [id, nome, phone, email]});
  23. 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. 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. 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. 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. 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. 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. 29. Relação 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. 30. editarContato: function(grid, record) { var edit = Ext.create(Egenial.view.contato.Formulario).show(); if(record){ edit.down(form).loadRecord(record); }},
  31. 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. 32. deleteContato: function(button) { var grid = this.getContatogrid(), record = grid.getSelectionModel().getSelection(), store = this.getContatosStore(); store.remove(record); this.getContatosStore().sync();}
  33. 33. app.js Ext.application({ name: Egenial, controllers: [ Contatos ], launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [{ xtype: contatogrid }] }); } });
  34. 34. Código Fonte p/ Download https://github.com/loiane/ cafe-com-tom-extjs4
  35. 35. Para saber mais:Curso Gratuito ExtJS 4http://loiane.com
  36. 36. Para saber mais: http://amzn.com/ 1849516669 http:// www.packtpub.com/ ext-js-4-first-look/ book
  37. 37. contato = { email: ‘contato@loiane.com’, blogPtBr: ‘loiane.com’, blogIngles: ‘loianegroner.com’, twitter: ‘@loiane’, github: ‘loiane’} Obrigada!
  38. 38. http://www.egenial.pro/pt/cafecomtom

×