Palestra apresentada na trilha de javascript do TDC 2011.

1. Aprimorando
sua App com
Ext JS 4
Loiane Groner

2. Loiane Quem?
palestrante = {
nome: ‘Loiane Groner’,
trabalha: ‘Sr Software Engineer’,
onde: ‘@Citibank - São Paulo’,
usaExtDesde: 2009,
twitter: ‘@loiane’,
escreve: ‘http://loiane.com’,
escreveEN: ‘http://loianegroner.com’
}

3. Mãos ao alto!
Conhece JQuery?
Conhece Ext JS?
Já trabalhou com Ext JS?

4. Mas o que
é esse tal
de Ext JS?

5. http://sencha.com

6. 1milhão de desenvolvedores
RIA JS Framework
Melhores componentes UI
do mercado

7. Puro HTML/Javascript

8. Com Ext JS
HOT!

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

11. XML
ou
JSON

12. Fácil
Integração

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

14. Orientado a
Objetos
Ext.define
('MyApp.CustomerPanel', {
extend: 'Ext.panel.Panel',
// etc.
});

15. Carregamento
Dinâmico
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander',
]);

16. Data Package
Field Reader
Validation Model
Writer
Association Proxy
Store
Sorter Grouper
Filter

17. Model Fields
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});

18. Model Validations
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email', 'height'],
validations: [
{type: 'presence', field: 'id'},
{type: 'length', field: 'name', min: 2},
{type: 'format', field: 'email', matcher: /[a-z]@[a-z].com/}
]
});

19. Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
Model
hasMany: 'Posts' Association
});
Ext.define('Post', {
extend: 'Ext.data.Model',
fields: ['id', 'user_id', 'title', 'body'],
belongsTo: 'User',
hasMany: 'Comments'
});
Ext.define('Comment', {
extend: 'Ext.data.Model',
fields: ['id', 'post_id', 'name', 'message'],
belongsTo: 'Post'
});

20. { Nested Data: JSON
id: 1
name: 'Loiane',
posts: [
{
id : 12,
title: 'New features in Ext JS 4',
body : 'Ext JS 4 is the most...',
comments: [
{
id: 123,
name: 'Someone',
message: 'Great Post!'
}
]
}
]
}

21. Dados Associados
//loads User with ID 123 using User's Proxy
User.load(123, {
success: function(user) {
console.log("User: " + user.get('name'));
user.posts().each(function(post) {
console.log("Comments for post: " +
post.get('title'));
post.comments().each(function(comment) {
console.log(comment.get('message'));
});
});
}
});

22. Store
new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: 'json'
},
autoLoad: true
});

23. new Ext.data.Store({
model: 'User',
sorters: ['name', 'id'],
filters: {
property: 'name',
value : 'Loiane'
},
groupers: {
property : 'age',
direction: 'ASC'
}
});

24. Proxy
AJAX REST
Local Storage
(Memory & JSON-P
HTML 5)

25. Componentes

26. Grid

27. Tree

28. Form + Validação
Nativa

29. Data View

30. Toolbar +
Buttons

31. Gerenciador
de Layout

32. Acessibilidade
(ARIA)

33. Desenhos

34. Charts

44. Temas
CSS 3:
Sass + Compass

45. Arquitetura MVC

46. Model
View Controller

47. Show me the code!

48. Código para
Download
http://github.com/
loiane/extjs4-tdc2011

49. Licença
US$ 595 por Dev

50. Livro:
Ext JS 4: First Look
RAW - Julho 2011
Lançamento: final 2011
http://extjs4book.com

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