Ext JS 4 Architecture

3,316 views
3,204 views

Published on

Ext JS 4 has a thoroughly revamped architecture that enables faster performance and more developer flexibility. In this session, we will take a tour through the revamped architecture of Ext JS 4.x, taking a high-level look at the updated data package, component hierarchy and core APIs. Afterwards, developers will have an understanding of why Ext JS 4 works the way it does and how best to leverage its underlying APIs.

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

No Downloads
Views
Total views
3,316
On SlideShare
0
From Embeds
0
Number of Embeds
289
Actions
Shares
0
Downloads
210
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ext JS 4 Architecture

  1. 1. Ext 4 Architecture Ed Spencer @edspencer
  2. 2. Ext JS Architecture Layouts State Utilities Data Components
  3. 3. Shared with Sencha Touch
  4. 4. Sencha Platform Ext JS Sencha Touch Platform
  5. 5. Sencha Platform Platform Data Layouts Utilities Charts Animation
  6. 6. Components Data Component Layout Utilities
  7. 7. Example Store Grid Layout Renderers
  8. 8. Ext 3 Proxy Store Reader Record Writer
  9. 9. Ext 4 Model Store Writer Proxy Reader
  10. 10. Models Writer Model Proxy Reader
  11. 11. Models Model
  12. 12. Models Fields Model
  13. 13. Models Fields Associations Model
  14. 14. Models Fields Associations Model Validations
  15. 15. Models Fields Associations Model Validations Proxy
  16. 16. Models Fields Associations Model Validations Proxy Business logic
  17. 17. Example
  18. 18. Example User Order OrderItem
  19. 19. Example User
  20. 20. Example Order
  21. 21. Example OrderItem
  22. 22. Loading Nested Data GET /users/1.json
  23. 23. Loading Nested Data GET /users/1.json Automatically loads associations
  24. 24. Automatically loadsassociations
  25. 25. Integrated with Components
  26. 26. Integrated with Components
  27. 27. Integrated with Components
  28. 28. Stores
  29. 29. Store’s supporting cast Store Data Sorters Filters
  30. 30. Richer Store API Sorters Filters
  31. 31. Richer Store API Sorters Sorters and Filters are MixedCollections Filters
  32. 32. Richer Store API Sorters Sorters and Filters are MixedCollections Add/remove any time Filters
  33. 33. Richer Store API Sorters Sorters and Filters are MixedCollections Add/remove any time Filters Ext.util.Sorter
  34. 34. Richer Store API Sorters Sorters and Filters are MixedCollections Add/remove any time Filters Ext.util.Sorter Ext.util.Filter
  35. 35. Proxies
  36. 36. Proxies Proxy ClientProxy ServerProxy
  37. 37. Server Proxies ServerProxy AjaxProxy RestProxy ScriptTagProxy
  38. 38. Client Proxies ClientProxy MemoryProxy WebStorageProxy WebSqlProxy
  39. 39. Proxies Store/Model Operation Proxy
  40. 40. Ext.data.Operation Operation
  41. 41. Ext.data.Operation Mediates between Store and Proxy Operation
  42. 42. Ext.data.Operation Mediates between Store and Proxy Operation Create, Read, Update or Destroy
  43. 43. Ext.data.Operation Mediates between Store and Proxy Operation Create, Read, Update or Destroy Asynchronous
  44. 44. Ext.data.Batch Create Batch Update Destroy
  45. 45. Ext.data.Batch Batch
  46. 46. Ext.data.Batch Combines Operations Batch
  47. 47. Ext.data.Batch Combines Operations Batch Batches into 1 request
  48. 48. Ext.data.Batch Combines Operations Batch Batches into 1 request Can run sequentially
  49. 49. Summary
  50. 50. SummaryLarge scale Architecture in 3.x good
  51. 51. SummaryLarge scale Architecture in 3.x goodNew data capabilities: Models
  52. 52. SummaryLarge scale Architecture in 3.x goodNew data capabilities: Models Associations
  53. 53. SummaryLarge scale Architecture in 3.x goodNew data capabilities: Models Associations Validations
  54. 54. SummaryLarge scale Architecture in 3.x goodNew data capabilities: Models Associations Validations Flexible Proxies
  55. 55. SummaryLarge scale Architecture in 3.x goodNew data capabilities: Models Associations Validations Flexible Proxies Operations & Batches
  56. 56. Questions?

×