Your SlideShare is downloading. ×
Cafe com Tom - ExtJS 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cafe com Tom - ExtJS 4

1,392
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,392
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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! Não precisa ficar esquentando a cabeça!
  • 4. FácilIntegração
  • 5. Pode integrar código!E outros....
  • 6. Contruindoaplicações ExtJS
  • 7. Como organizar um projeto JS?
  • 8. ExtJS 34k linhasde código
  • 9. Difícil de testarDifícil de manterDifícil de trabalhar em equipeDifícil de entender
  • 10. Trabalho em EquipePessoas diferentes == trabalhodiferenteÉ preciso usar um padrão
  • 11. Código precisa ser organizadoBoas práticas precisam ser seguidasEvitar confusão com versão decontrole
  • 12. Model View Controller == MVC
  • 13. ModelCarrega e Gerencia dados da appDados dos requests da View
  • 14. ViewGerencia a visualização dos dadosComponentes UI
  • 15. ControllerGerencia inputs do usuárioAtualiza o Model e View
  • 16. Model
  • 17. View
  • 18. View
  • 19. Controller
  • 20. Benefícios 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. 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. 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. Código 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-first-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