Ext JS Upgrade Adviser scans your Ext JS 4.x and Ext JS 5.x apps to identify and report problems in your source code that need to be addressed before upgrading to the latest Ext JS version.

1. Ext JS Upgrade Adviser - Early Access
Introduction
Jack Ratcliff
Senior Software Architect
Celestial Systems, a platinum partner of Sencha
Sandeep Adwankar
Sr. Product Manager
Sencha

2. What will be covered
• Why Upgrade to Ext JS 6.x
• Introduction to Ext JS Upgrade Adviser
• ES Lint Rules
• Demos
• Ext ES Lint Plugin demo
• Ext JS Upgrade Adviser demo

3. Sencha Ext JS – A History of Innovation
3
Ext JS 4.x
Ext JS 5.x
Ext JS 6.0
Ext JS 6.5
Ext JS 6.6

4. Ext JS 6.x – Universal Apps
4
• Desktop, Tablets, Phones
• Modern & Legacy
Browsers
• Device Specific UX
• Adaptive and Responsive

5. Ext JS 6.x – Pivot Grid
• Sencha Pivot Grid
• Analytics capabilities for Ext JS grid
• Results Filtering & Grouping
• Sub-totals and Grand-totals
• Configurator for Ad-Hoc analysis
• Drilldown to raw records
• Integrated with Charts
• Excel export of any Ext JS grid
5

6. Ext JS 6.x – Grid Enhancements
• Row Body Widgets
• Components within the row body
when a grid row is expanded
• Available for both toolkits
• Row body widgets can be linked to
parent grid record
• Can put any component within the
row body, not just grid inside a grid
6

7. Ext JS 6.x – D3 Adapter
• SVG or Canvas rendering to Ext JS
containers
• Managed as any other Ext JS
component
• Integration with Ext JS data stores to
update the visualizations as data
changes
• Data Store for regular data
• Tree Store for hierarchical data
• Pan/zoom interaction
7

8. Ext JS 6.x – Calendar Component
• Provides building blocks to include
calendar in Ext JS apps
• Day, Week, & Month views
• Store to define events
• Time zone support
• Drag, Resize & Validation
• Sample Google Calendar API
integration
8

9. Ext JS 6.x – Viewport Pinch/Zoom & Native Scrolling
• Implemented in ‘Core’ – applies to both
Modern & Classic toolkits
• Viewport Zoom enabled
• “user-scalable=yes”
• Browser's native pan and zoom
• Browser’s native support for
momentum scrolling
9

10. Ext JS 6.x – Enhanced Data Exporter
• Enhanced exporter plugin
• XLSX, XML, CSV, TSV, and HTML
formats
• Works with Classic & Modern toolkits
10

11. Ext JS 6.x – App Templates
• App Templates (Pre-Built App Experiences)
• Beyond Kitchen Sink
• Mimic real world app UX
• Built entirely with Ext JS 6
• Base theme as Triton
• Adaptive Design
• Device Specific Views

12. Ext JS 6.x – Triton Theme
• Minimalistic
• No rounded corners
• No gradients
• Nearly borderless
• Font Icons / Web Fonts
• Lightweight / imageless
• Resolution independent
• Improved network load time
• Switch colors

13. Ext JS 6.x – Charts Enhancements
13
Box Plot Navigator

14. Ext JS 6.x – Accessibility Improvements (508 Compliance)
• Actionable Mode
• Keyboard navigation for grid cell
content
• Enables power users to navigate
into any parts of a grid
• Screen Reader Mode
• ARIA functionality integrated into
framework core
• Support screen readers without
special inclusions
14

15. Ext JS 6.x – Ext JS NPM Packages
● New Open Tooling - ExtGen,
ExtBuild
● New beautiful Graphite theme
● Advanced Ext JS routing
● Enhanced gauges components
15

16. What is Ext JS Upgrade Adviser
• Solution for scanning Ext JS apps that identifies and reports problems in source
code that need to be addressed before upgrading
• Problems currently identifiable are the use of removed, private and deprecated
methods, configs and properties
• Some problems can be automatically fixed
• Uses a custom ESLint plugin designed specifically for Ext JS that can
additionally be run from the command line or integrated in an IDE

17. What is ESLint
As previously mentioned, the Ext JS Upgrade Adviser uses a custom ESLint plugin to identify upgrade issues. So what exactly is ESLint?
• ESLint is an open source JavaScript linting utility originally created by Nicholas
C. Zakas in June 2013. Code linting is a type of static analysis that is frequently
used to find problematic patterns or code that doesn’t adhere to certain style
guidelines.
• Designed to have all rules completely pluggable.
• Comes with a bunch of default rules to get you started.
• Some rules can auto fix code.
• Written to be used primarily on the command line.
• Can be integrated into code editors, build tools, etc.

18. ESLint Demo
• How to install
• How to configure
• How to run from the command line
• How to integrate into VS Code
• How to auto fix problems

19. Ext JS ESLint Plugin Demo
• How to install
• How to configure
• How to run from the command line

20. Ext JS Upgrade Adviser demo
• How to install
• How to run
• How to configure

21. Sencha Professional Services
21
SENCHA SERVICES
• Starter code review – 1-2 hours to review your ExtJS app for migration
suggestions
• Design recommendations – provide expert guidance for taking
advantage of new version features
• Angular/React migration – review options for migration to open source
tooling
• Complete upgrade – a comprehensive migration project to ExtJS 6.7
Guidance and support services to complete a migration

22. Thank You!