Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
3 likes942 views
The document discusses new features in Ext JS 4 including an improved class system with mixins and dynamic loading, an enhanced data package with associations between models and nested data loading, model validation, and charts. It also introduces the new MVC architecture and provides contact information for the speaker including websites and social media handles.
![Dynamic Loading Hierarchy
Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires:
" " " " " ['Ext.util.MixedCollection'],
mixins: {
draggable: 'Ext.util.Draggable'
}
});](https://image.slidesharecdn.com/braziljs-110515130600-phpapp02/85/Aprimorando-sua-Aplicacao-com-Ext-JS-4-BrazilJS-25-320.jpg)
![Model Declaration
Ext.regModel('User', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});](https://image.slidesharecdn.com/braziljs-110515130600-phpapp02/85/Aprimorando-sua-Aplicacao-com-Ext-JS-4-BrazilJS-29-320.jpg)
![Store Features
new Ext.data.Store({
model: 'User',
sorters: ['name', 'id'],
filters: {
property: 'name',
value : 'Loiane'
},
groupers: {
property : 'age',
direction: 'ASC'
}
});](https://image.slidesharecdn.com/braziljs-110515130600-phpapp02/85/Aprimorando-sua-Aplicacao-com-Ext-JS-4-BrazilJS-31-320.jpg)
![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'
});](https://image.slidesharecdn.com/braziljs-110515130600-phpapp02/85/Aprimorando-sua-Aplicacao-com-Ext-JS-4-BrazilJS-32-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/braziljs-110515130600-phpapp02/85/Aprimorando-sua-Aplicacao-com-Ext-JS-4-BrazilJS-34-320.jpg)
![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/}
]
});](https://image.slidesharecdn.com/braziljs-110515130600-phpapp02/85/Aprimorando-sua-Aplicacao-com-Ext-JS-4-BrazilJS-35-320.jpg)
Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
- 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?
- 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
- 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’ }