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 & Benefits
Cross-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 & Benefits
Performance Improvements
• Reduced layout calculations
• Optimized layout process to prevent
“Layout Storms”
• Improved event handling response time
6. Features & Benefits
Memory 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 & Benefits
Accessibility / 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 Changes
Stronger 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."
10. Core Framework Changes
Data Package Enhancements
• REST Support in Data Stores
• Supports Full CRUD operations
11. Core Framework Changes
Data 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
16. Operative One Code Changes
Column 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 Changes
Listener Setup
• set scope per individual listener, especially
for LovCombos.
18. Operative One Code Changes
Other Changes
1. 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. Don't 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 Changes
Other Changes
8. 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 Changes
Performance Considerations
• Use Ext.Container instead of Ext.Panel whenever
possible
• use a container instead of a panel when
advanced configuration like toolbars and
headers aren't needed.
• Keep component hierarchy as flat as possible
• Every additional container level increases the
layouting/ rendering time, try to merge
container levels when possible.
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
