Apresentação feita no BrazilJS 2011, 13 de maio de 2011, em Fortaleza - Ceará sobre Ext JS 4

1. Aprimorando
sua Aplicação
com Ext JS 4
Loiane Groner
http://loiane.com
http://loianegroner.com BrazilJS
me@loiane.com

2. Loiane...
palestrante = {
nome: ‘Loiane Groner’,
trabalha: ‘Senior Software Engineer’,
onde: ‘@Citibank - São Paulo’,
usaExtDesde: 2009,
twitter: ‘@loiane’
}

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

4. http://sencha.com

5. Ext JS
é
líndio!

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

7. Puro HTML/Javascript Com Ext JS
HOT!

9. XML
ou
JSON

10. Tem
para
todos

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

12. Ext 3
->
Ext 4

13. Framework
rewritten

14. Performance++

15. Faster++

16. Stable++

17. E outros....

18. Plus:
*New Class System
*New Data Package
*New Charts
*New Theming: CSS3
*New Architecture:
MVC

19. The New Class
System

21. Class Definition
// Ext 3:
Ext.ns('MyApp'); // required in Ext 3
MyApp.CustomerPanel = Ext.extend
(Ext.Panel, {
// etc.
});
// Ext 4
Ext.define('MyApp.CustomerPanel', {
extend: 'Ext.panel.Panel',
// etc.
});

22. Mixins
Ext.define('Sample.Musician', {
extend: 'Sample.Person',
mixins: {
guitar: 'Sample.ability.CanPlayGuitar',
compose: 'Sample.ability.CanComposeSongs',
sing: 'Sample.ability.CanSing'
}
});

23. Mixin Definition
Ext.define
('Sample.ability.CanPlayGuitar',
{
playGuitar: function() {
//code to play
}
});

24. Dynamic Loading
Ext.require('Ext.Window', function() {
new Ext.Window({
title : 'Loaded Dynamically!',
width : 200,
height: 100
}).show();
});

25. Dynamic Loading Hierarchy
Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires:
" " " " " ['Ext.util.MixedCollection'],
mixins: {
draggable: 'Ext.util.Draggable'
}
});

26. The New Data
Package

29. Model Declaration
Ext.regModel('User', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});

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

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

32. Ext.regModel('User', {
fields: ['id', 'name'],
});
hasMany: 'Posts' Associations
Ext.regModel('Post', {
fields: ['id', 'user_id', 'title', 'body'],
belongsTo: 'User',
hasMany: 'Comments'
});
Ext.regModel('Comment', {
fields: ['id', 'post_id', 'name', 'message'],
belongsTo: 'Post'
});

33. Loading Nested Data
//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'));
});
});
}
});

34. { 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!'
}
]
}
]
}

35. Model Validation
Ext.regModel('User', {
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/}
]
});

36. Charts

38. MVC
Architecture

39. Hands On!!!

40. Código para
Download:
https://github.com/
loiane/ext4-crud-mvc

41. Book:
Ext JS 4: First Look!!!
Coming: 2011

43. contato = {
email: ‘me@loiane.com’,
blogPtBr: ‘loiane.com’,
blogIngles: ‘loianegroner.com’,
twitter: ‘@loiane’,
github: ‘loiane’,
slideshare: ‘loianeg’
}