Extjs3.4 Migration Notes

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • During this presentation, I’ll explain the reasons for adopting Ext 3 and also outline some of the key features and benefits after the upgrade.
  • During this presentation, I’ll explain the reasons in adopting Ext 3 and also outline some of the key features and benefits of this upgrade.
  • - Let’s look at why migrating to Ext3 has become a necessary task.- As you can see on the release timeline on the left, Ext3.4 represents 3 years of active development, since Ext2.2. What this means is massive amount of bug fixes. - Plus many new features and enhancements that not only enhance the user experience but also helps simplify code complexity.- Cross browser compatibility has also been improved as well and now covers all of the major web browsers. There are also improvements in performance.
  • Redundant calls to expensive layout calculations were reduced wherever possible.Resizing of child containers is suspended until the layout process is complete which prevents a "Layout Storm" which could occur previously.The event caching mechanism was overhauled to provide a faster response time. Buffered and deferred events are now being removed during element and component destruction stopping extraneous events from being executed.
  • Since Ext JS 3.1, a wide array of workarounds for memory leaks have been implemented—most notably in IE 6+. Ext JS 3.1 has undergone extensive refactoring to ensure all components are properly removing DOM references.New Element caching flushing of unused elements during garbageCollection in IE. In certain tests, we gained a 50x memory reduction for long-running single-page apps.
  • - Locking grids columns allow users to view specific columns while scrolling horizontally.- Grid columns can now be grouped together easily. Columns can also be reordered within a group, for maximum flexibility. - TreeGrid combines the power of a Grid(sorting, showing additional information) with the flexibility and UI of a Tree.- PivotGrids are a data summarization tool that are great for breaking large datasets down into an understandable format. -
  • A single store using the Proxy, Reader and Writer together through a RESTful interface.By setting restful to true, the store will automatically generate GET, POST, PUT and DELETE requests to the server.
  • DataWriter (along with descendant JsonWriter) along with the Reader and Proxy enable full CRUD operations


  • 1. EXTJS 3.4MI GRATION NOTES Simo Moujami 12/12/2011 12/20/2011 1
  • 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. 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. 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. Features & BenefitsPerformance Improvements • Reduced layout calculations • Optimized layout process to prevent “Layout Storms” • Improved event handling response time
  • 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. 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. 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. 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. Core Framework ChangesData Package Enhancements • REST Support in Data Stores • Supports Full CRUD operations
  • 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. 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. Operative One Code ChangesData Package / DWR Proxy
  • 14. Operative One Code ChangesLayout configurations
  • 15. Operative One Code ChangesPagination Toolbar
  • 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. Operative One Code ChangesListener Setup• set scope per individual listener, especially for LovCombos.
  • 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. 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. 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. 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/