39
Café com TOM: Ext JS 4 Loiane Groner @loiane http://loiane.com
Cafe com Tom - ExtJS 4
Embed Size (px)
DESCRIPTION
Café com Tom da Egenial - 04/fev/2012
Citation preview
- 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: [email protected], blogPtBr:
loiane.com, blogIngles: loianegroner.com, twitter: @loiane, github:
loiane} Obrigada!
- 38. http://www.egenial.pro/pt/cafecomtom