1. EXTJS 3.4
MI 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 & 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."

9. Core Framework Changes
New UI Components
 RowEditor  Tree Grid
 ListView  Pivot Grid
 Charting Components  Calendar Panel
 ButtonGroup  Composite Field
 GroupTabs  Slider Field
Enhanced 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 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

12. Operative One Code Changes
Deprecated
• Ext 2.2 Library • SliderField.js
• Calculator.js • DateSlider.js
• ColumnField.js • PaymentItemCards.js
• SLIPagingToolbar.js • GridRowChecker.js
• SlideZone.js
Relocated
• 3P “extensions” folder • SlideZone.js
• Calculator.js • SliderField.js
• ColumnField.js • DateSlider.js
• SLIPagingToolbar.js • PaymentItemCards.js
New & Updated
• Ext 3.4 Library • SliderField.js
• overrides.js • DateSlider.js
• overrides.css • PaymentItemCards.js

13. Operative One Code Changes
Data Package / DWR Proxy

14. Operative One Code Changes
Layout configurations

15. Operative One Code Changes
Pagination Toolbar

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.

21. References
Sencha, Inc
• http://www.sencha.com
Ext Version Archives
• http://www.sencha.com/learn/legacy/Ext_Version_Archives
Ext3.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/