Aprimorando sua Aplicação com Ext JS 4 - BrazilJS

5,180 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,180
On SlideShare
0
From Embeds
0
Number of Embeds
617
Actions
Shares
0
Downloads
87
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Aprimorando sua Aplicação com Ext JS 4 - BrazilJS

  1. 1. Aprimorando sua Aplicação com Ext JS 4Loiane Gronerhttp://loiane.comhttp://loianegroner.com BrazilJSme@loiane.com
  2. 2. Loiane...palestrante = { nome: ‘Loiane Groner’, trabalha: ‘Senior Software Engineer’, onde: ‘@Citibank - São Paulo’, usaExtDesde: 2009, twitter: ‘@loiane’}
  3. 3. Mãos ao alto! Conhece JQuery? Conhece Ext JS?Já trabalhou com Ext JS?
  4. 4. http://sencha.com
  5. 5. Ext JS élíndio!
  6. 6. 1milhão de desenvolvedoresRIA JS FrameworkMelhores componentes UI domercado
  7. 7. Puro HTML/Javascript Com Ext JS HOT!
  8. 8. XML ouJSON
  9. 9. Tem paratodos
  10. 10. Cross Browser Funciona até no IEca 6! Não precisa ficar esquentando a cabeça!
  11. 11. Ext 3 ->Ext 4
  12. 12. Framework rewritten
  13. 13. Performance++
  14. 14. Faster++
  15. 15. Stable++
  16. 16. E outros....
  17. 17. Plus:*New Class System*New Data Package*New Charts*New Theming: CSS3*New Architecture: MVC
  18. 18. The New Class System
  19. 19. Class Definition// Ext 3:Ext.ns(MyApp); // required in Ext 3MyApp.CustomerPanel = Ext.extend(Ext.Panel, { // etc.});// Ext 4Ext.define(MyApp.CustomerPanel, { extend: Ext.panel.Panel, // etc.});
  20. 20. MixinsExt.define(Sample.Musician, { extend: Sample.Person, mixins: { guitar: Sample.ability.CanPlayGuitar, compose: Sample.ability.CanComposeSongs, sing: Sample.ability.CanSing }});
  21. 21. Mixin Definition Ext.define(Sample.ability.CanPlayGuitar,{ playGuitar: function() { //code to play }}); 
  22. 22. Dynamic LoadingExt.require(Ext.Window, function() { new Ext.Window({ title : Loaded Dynamically!, width : 200, height: 100 }).show();});
  23. 23. Dynamic Loading HierarchyExt.define(Ext.Window, { extend: Ext.Panel, requires:" " " " " [Ext.util.MixedCollection], mixins: { draggable: Ext.util.Draggable }});
  24. 24. The New Data Package
  25. 25. Model DeclarationExt.regModel(User, { fields: [ {name: id, type: int}, {name: name, type: string} ]});
  26. 26. New Store Declarationnew Ext.data.Store({ model: User, proxy: { type: ajax, url : users.json, reader: json }, autoLoad: true});
  27. 27. Store Featuresnew Ext.data.Store({ model: User,  sorters: [name, id], filters: { property: name, value : Loiane }, groupers: { property : age, direction: ASC }}); 
  28. 28. 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});
  29. 29. Loading Nested Data//loads User with ID 123 using Users ProxyUser.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)); }); }); }});
  30. 30. { 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! } ] } ]}
  31. 31. Model ValidationExt.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/} ]});
  32. 32. Charts
  33. 33. MVCArchitecture
  34. 34. Hands On!!!
  35. 35. Código para Download: https://github.com/loiane/ext4-crud-mvc
  36. 36. Book:Ext JS 4: First Look!!! Coming: 2011
  37. 37. contato = { email: ‘me@loiane.com’, blogPtBr: ‘loiane.com’, blogIngles: ‘loianegroner.com’, twitter: ‘@loiane’, github: ‘loiane’, slideshare: ‘loianeg’}

×