O documento apresenta uma introdução ao framework JavaScript Ext JS 4, descrevendo suas principais características como suporte a navegadores legados, fácil integração e organização de código através do padrão MVC. Também explica a estrutura de arquivos recomendada para um projeto Ext JS, separando model, view e controller.

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

2. http://sencha.com

4. Cross Browser
Funciona até
no IEca 6!
Não precisa
ficar
esquentando
a cabeça!

5. Fácil
Integração

6. Pode integrar código!
E outros....

7. Contruindo
aplicações ExtJS

8. Como organizar
um projeto JS?

9. ExtJS 3
4k linhas
de código

10. Difícil de testar
Difícil de manter
Difícil de trabalhar em equipe
Difícil de entender

11. Trabalho em Equipe
Pessoas diferentes == trabalho
diferente
É preciso usar um padrão

12. Código precisa ser organizado
Boas práticas precisam ser seguidas
Evitar confusão com versão de
controle

13. Model View Controller == MVC

14. Model
Carrega e Gerencia dados da app
Dados dos requests da View

15. View
Gerencia a visualização dos dados
Componentes UI

16. Controller
Gerencia inputs do usuário
Atualiza o Model e View

17. Model

18. View

19. View

20. Controller

21. Benefícios do MVC
Escalabilidade
Mantenabilidade
Flexibilidade

22. Estrutura dos Arquivos

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

24. 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'
}
}
});

25. 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'
}],

26. 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);
}
});

27. 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'
}]
}];

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

29. Controller
Ext.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'
}],

30. Relação controller -> view
view -> 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
}
});
},

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

32. 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();
},

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

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

35. Código Fonte p/ Download
https://github.com/loiane/
cafe-com-tom-extjs4

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

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

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

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