TDC 2011 - Ext JS 4
2 gostaram1,039 visualizações
O documento apresenta Ext JS, um framework JavaScript para construção de interfaces ricas na web. Ext JS fornece componentes reutilizáveis como grids, árvores, formulários e gráficos que funcionam em todos os browsers. Ele também oferece recursos como carregamento dinâmico de código, validação de dados, associação de modelos e armazenamento em cache local.
![Carregamento
Dinâmico
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander',
]);](https://image.slidesharecdn.com/tdc2011-110707140843-phpapp01/85/TDC-2011-Ext-JS-4-15-320.jpg)
![Model Fields
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});](https://image.slidesharecdn.com/tdc2011-110707140843-phpapp01/85/TDC-2011-Ext-JS-4-17-320.jpg)
![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/}
]
});](https://image.slidesharecdn.com/tdc2011-110707140843-phpapp01/85/TDC-2011-Ext-JS-4-18-320.jpg)
![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'
});](https://image.slidesharecdn.com/tdc2011-110707140843-phpapp01/85/TDC-2011-Ext-JS-4-19-320.jpg)
![{ 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!'
}
]
}
]
}](https://image.slidesharecdn.com/tdc2011-110707140843-phpapp01/85/TDC-2011-Ext-JS-4-20-320.jpg)
![new Ext.data.Store({
model: 'User',
sorters: ['name', 'id'],
filters: {
property: 'name',
value : 'Loiane'
},
groupers: {
property : 'age',
direction: 'ASC'
}
});](https://image.slidesharecdn.com/tdc2011-110707140843-phpapp01/85/TDC-2011-Ext-JS-4-23-320.jpg)
TDC 2011 - Ext JS 4
- 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?
- 6. 1milhão de desenvolvedores RIA JS Framework Melhores componentes UI do mercado
- 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
- 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!