Contenu connexe
Similaire à TDC 2011 - Ext JS 4 (20)
TDC 2011 - Ext JS 4
- 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?
- 10. Cross Browser
Funciona até
no IEca 6!
Não precisa
ficar
esquentando
a cabeça!
- 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
- 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'));
});
});
}
});
- 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)
- 44. Temas
CSS 3:
Sass + Compass
- 48. Código para
Download
http://github.com/
loiane/extjs4-tdc2011
- 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!