Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
EXTJS 3.4MI GRATION   NOTES                     Simo Moujami                        12/12/2011                            ...
Agenda• Why ExtJS 3.4• Features & Benefits   •   Cross-Browser Support   •   Performance Improvements   •   Memory Managem...
Why ExtJS 3.4   •   3 Years of active development. 12 releases   •   Hundreds of Bug fixes, New Features and       Enhance...
Features & BenefitsCross-Browser Support   •   ExtJS 3 brings support to IE 8 & 9   •   Enhances support for all major web...
Features & BenefitsPerformance Improvements   •   Reduced layout calculations   •   Optimized layout process to prevent   ...
Features & BenefitsMemory Management Improvements  •   Fixes to several memory leaks.      •   DOM Leaks      •   Javascri...
Features & BenefitsAccessibility / Simplified Theming   •   Section 508 and ARIA Support   •   Easy Keyboard navigation wi...
Core Framework ChangesStronger Error reporting   •    More robust error handling throughout the        framework to assist...
Core Framework ChangesNew UI Components RowEditor              Tree Grid ListView               Pivot Grid Charting C...
Core Framework ChangesData Package Enhancements   •    REST Support in Data Stores   •    Supports Full CRUD operations
Core Framework ChangesData Package Enhancements   •    CRUD support with Ext.data.DataWriter        The store exposes seve...
Operative One Code ChangesDeprecated   •   Ext 2.2 Library          •   SliderField.js   •   Calculator.js            •   ...
Operative One Code ChangesData Package / DWR Proxy
Operative One Code ChangesLayout configurations
Operative One Code ChangesPagination Toolbar
Operative One Code ChangesColumn Editor•   No explicit use of the Ext.Editor / Ext.grid.GridEditor    when setting column ...
Operative One Code ChangesListener Setup•   set scope per individual listener, especially    for LovCombos.
Operative One Code ChangesOther Changes1.   this.remove() only works with direct children. A.remove(B)     only works if B...
Operative One Code ChangesOther Changes8.   DON’T USE STATIC IDS AT ALL.     Use relative references as this.deleteButton ...
Operative One Code ChangesPerformance Considerations•   Use Ext.Container instead of Ext.Panel whenever    possible     • ...
ReferencesSencha, Inc•    http://www.sencha.comExt Version Archives•   http://www.sencha.com/learn/legacy/Ext_Version_Arch...
Upcoming SlideShare
Loading in …5
×

Extjs3.4 Migration Notes

2,074 views

Published on

Published in: Technology
  • Be the first to comment

Extjs3.4 Migration Notes

  1. 1. EXTJS 3.4MI GRATION NOTES Simo Moujami 12/12/2011 12/20/2011 1
  2. 2. Agenda• Why ExtJS 3.4• Features & Benefits • Cross-Browser Support • Performance Improvements • Memory Management Improvements • Accessibility / Simplified Theming• Core Framework Changes • Core Component Changes • Data Package Enhancements• Operative One Code Changes• References
  3. 3. Why ExtJS 3.4 • 3 Years of active development. 12 releases • Hundreds of Bug fixes, New Features and Enhancements • Added Support for IE8 & IE9 • Enhanced Support for Chrome & Safari • Performance Enhancements • Significant Memory Management Enhancements • Accessibility Features • Theming support • Native Charting Library • Dropped support for ExtJS 2 12/20/2011 3
  4. 4. Features & BenefitsCross-Browser Support • ExtJS 3 brings support to IE 8 & 9 • Enhances support for all major web browsers: • Internet Explorer 6+ • Firefox 3.6+ (PC, Mac) • Safari 3+ • Chrome 6+ • Opera 10.5+ (PC, Mac)
  5. 5. Features & BenefitsPerformance Improvements • Reduced layout calculations • Optimized layout process to prevent “Layout Storms” • Improved event handling response time
  6. 6. Features & BenefitsMemory Management Improvements • Fixes to several memory leaks. • DOM Leaks • Javascript Leaks • Auto-Removal of Event listeners: mon() adds listeners to an internal collection which is destroyed when the object is destroyed, assisting you in memory management.
  7. 7. Features & BenefitsAccessibility / Simplified Theming • Section 508 and ARIA Support • Easy Keyboard navigation with Focus Manager • Screen reader support • High contrast theme for all components
  8. 8. Core Framework ChangesStronger Error reporting • More robust error handling throughout the framework to assist during a debug process • The developer will be alerted to the issue allowing them to quickly find the point of failure and rectify the problem. • Example: "DataProxy attempted to execute an API-action but found an undefined url / function. Please review your Proxy url/api-configuration."
  9. 9. Core Framework ChangesNew UI Components RowEditor  Tree Grid ListView  Pivot Grid Charting Components  Calendar Panel ButtonGroup  Composite Field GroupTabs  Slider FieldEnhanced Components Buttons  Grid Column Locking Toolbar Overflow  Grid Column Grouping Menu Overflow  Multiple Data Sorting and AnchorTips filtering Buffered GridView  DataView transitions Debug Console  Toolbar Plugins
  10. 10. Core Framework ChangesData Package Enhancements • REST Support in Data Stores • Supports Full CRUD operations
  11. 11. Core Framework ChangesData Package Enhancements • CRUD support with Ext.data.DataWriter The store exposes several methods like save and create which will trigger communication with the server-side
  12. 12. Operative One Code ChangesDeprecated • Ext 2.2 Library • SliderField.js • Calculator.js • DateSlider.js • ColumnField.js • PaymentItemCards.js • SLIPagingToolbar.js • GridRowChecker.js • SlideZone.jsRelocated • 3P “extensions” folder • SlideZone.js • Calculator.js • SliderField.js • ColumnField.js • DateSlider.js • SLIPagingToolbar.js • PaymentItemCards.jsNew & Updated • Ext 3.4 Library • SliderField.js • overrides.js • DateSlider.js • overrides.css • PaymentItemCards.js
  13. 13. Operative One Code ChangesData Package / DWR Proxy
  14. 14. Operative One Code ChangesLayout configurations
  15. 15. Operative One Code ChangesPagination Toolbar
  16. 16. Operative One Code ChangesColumn Editor• No explicit use of the Ext.Editor / Ext.grid.GridEditor when setting column editors. • Column Definition: { header : “Unit Cost”, editor : new Ext.form.TextField() } • Access Field (Old way): column.editor.field.store • Access Field (New way): column.editor.store
  17. 17. Operative One Code ChangesListener Setup• set scope per individual listener, especially for LovCombos.
  18. 18. Operative One Code ChangesOther Changes1. this.remove() only works with direct children. A.remove(B) only works if B is a direct child of A.2. Use anchor with “100%” value instead of “-20”3. Setting collapsible to true will automatically create a header. Set header to false in this case.4. Don’t explicitely set labelWidth. It’s now set for you by default.5. Dont rely on record.id. It returns (ext-record-145)6. Use wrapper methods instead of accessing properties directly.7. Use enable(), disable(), show() hide() instead of setDisabled(true/false) and setVisible(true/false)
  19. 19. Operative One Code ChangesOther Changes8. DON’T USE STATIC IDS AT ALL. Use relative references as this.deleteButton or use itemId or name as alternative attribute.9. Setting autoHeight with auto layouts might affect toolbar widths. Only use it if needed.
  20. 20. Operative One Code ChangesPerformance Considerations• Use Ext.Container instead of Ext.Panel whenever possible • use a container instead of a panel when advanced configuration like toolbars and headers arent needed.• Keep component hierarchy as flat as possible • Every additional container level increases the layouting/ rendering time, try to merge container levels when possible.
  21. 21. ReferencesSencha, Inc• http://www.sencha.comExt Version Archives• http://www.sencha.com/learn/legacy/Ext_Version_ArchivesExt3.x Features & Release Notes:• http://www.sencha.com/blog/ext-js-30-be-outstanding• http://www.sencha.com/blog/ext-js-30-rc11-released/• http://www.sencha.com/blog/ext-js-30-rc2-release-stable-robust-and- enhanced/• http://www.sencha.com/blog/ext-js-31-massive-memory-improvements- treegrid-and-more/• http://www.sencha.com/blog/ext-js-32-final-released/• http://www.sencha.com/blog/announcing-ext-js-33-beta-pivotgrids- calendars-and-more/• http://www.sencha.com/blog/ext-js-33-beta-2-released/

×