The document summarizes new features in Sencha Architect 4.1 and Themer 1.1. Architect 4.1 adds support for Ext JS 6.2.1, drag and drop premium components like D3 charts, calendars and pivot grids. It improves grid functionality and allows extending controller and models. Themer 1.1 allows directly theming applications in inspect mode and includes support for classic and modern toolkits. A theming contest was also announced with a $2500 prize.

1. © 2016 Sencha Inc
Accelerating WebApplication Development with
Sencha Architect 4.1 and Themer 1.1
Sandeep Adwankar
Sr. Product Manager

2. © 2016 Sencha Inc
Architect 4.1 EA
2

3. © 2016 Sencha Inc
Sencha Architect 4.1 – What’s New
• Support for Ext JS 6.2.1 and Cmd 6.2.1
• Drag and drop Premium Components
- D3 , Calendar, Pivot grid, Exporter
• Better Grid Support
- Row widget, header resizer for Classic
- Row expander for Modern
- Grid Builder support in Modern
• Extend Controller and Models
• Asset Manager to manage frameworks
3

4. © 2016 Sencha Inc
Architect 4.1 – D3 Adapter
Integrates the D3.js library with Ext JS
core and provides some of the most
commonly used D3 visualizations as
ready to use components in Ext JS.
- Integration with data stores to update the
visualizations as data changes
• Data Store for regular data
• Tree Store for hierarchical data
- Pan/zoom interactions
4

5. © 2016 Sencha Inc
Architect 4.1 – Calendar Component
Provides all the building blocks needed
to include advanced calendaring
capabilities in Ext JS applications.
- Day, Week, & Month views
- Store to define events
- Time zone support
- Drag, Resize & Validation
- Google’s Calendar API integration
5

6. © 2016 Sencha Inc
Architect 4.1 – Pivot Grid
Powerful data analysis capabilities
available in both Classic and Modern
Toolkit.
- Drag-and-drop configurator
- Plugins for drilldown, range editor,
exporter, etc.
- Different layouts and styling elements
- Optimized for touch-devices
6

7. © 2016 Sencha Inc
Architect 4.1 – Data Exporter
Supports export for native XLSX format,
as well as many other common export
formats such as HTML, CSV, and TSV.
- Capability to configure the exports for
visible or invisible (hidden columns) data
- Column styling in the exported
documents
- Available in both toolkits, for Grids and
Pivot Grid
7

8. © 2016 Sencha Inc
Architect 4.1 – Grid Enhancements
Exciting new functionality such as ‘row
body widgets’ that will allow you to add
components to the row body, such as
grid inside a grid.
- Available for both toolkits
- Can be linked to parent grid record
- Can put any component within the row
body, not just grid inside a grid
8

9. © 2016 Sencha Inc
Architect 4.1 – Modern Row Expander

10. © 2016 Sencha Inc
Architect 4.1 – Modern Tree Grid

11. © 2016 Sencha Inc
Architect 4.1 – Modern UI Builder
• Similar to classic apps, there is now
support for UI builder in Modern apps.
• Auto-generate grid view columns,
store, model, editors, controller actions
and mock data.

12. © 2016 Sencha Inc
Architect 4.1 – Manage Ext JS frameworks, Cmd
• Sencha Architect now has option to
manage frameworks where you can
choose to install or remove framework
or Sencha Cmd versions.
• You can find the Manage
Frameworks option in File tab in
Preferences menu.

13. © 2016 Sencha Inc
Architect 4.1 – Import and Export Configs
• Import configs – Paste config values
and apply to a class
• Export configs – Export config values
to clipboard that you can copy to other
projects

14. © 2016 Sencha Inc
Sencha Architect 4.1 EA release
• Run multiple instances of Architect on
your computer
• Updated version of Electron Container
• EAAvailable:
http://pages.sencha.com/ext-js-tools-ea-2016.html

15. © 2016 Sencha Inc
Demo
Architect 4.1
15

16. © 2016 Sencha Inc
Themer 1.1 EA
16

17. © 2016 Sencha Inc
Sencha Themer – Now Part of Pro Bundle!
• Design themes in an interactive visual
environment - no code
• Quick configurations for global theme
variables
• Support for component UIs
• View live style update to your Ext JS app –
No compile, build, reload
• Package your theme, apply to your app
and share with ease
17

18. © 2016 Sencha Inc
Themer 1.1 – Easily Connect app to Themer
• Directly connect your app to Themer
• Update app.json and view connected
apps from View -> Connected Apps
18

19. © 2016 Sencha Inc
Themer 1.1 – Directly Theme your app
• Inspect mode provides fine-grained
control over style selection in Your App
• Modify Sass variables and see
changes live
• Inspect mode allows freezing and
locking state of all components in
preview app
• Easy way to theme component states
such as – hover, pressed, open
19

20. © 2016 Sencha Inc
Themer – Support for Classic and Modern Toolkit
20

21. © 2016 Sencha Inc
Themer – Theme with innovative color selectors
• Color Palette showing base,
background and text color with 5%
lighter and darker
• Material Design based Color Palette
21

22. © 2016 Sencha Inc
Themer – Comprehensive view of all updated styles
• View all Sass variables that you can
style
• As you style you app, filter view to see
updated Sass variables and their
values
22

23. © 2016 Sencha Inc
Themer – Uniquely configure individual Ext JS component
with UIs
• Easy to create a “UI” configuration
• Configure “UI” like any other Ext JS
component
23

24. © 2016 Sencha Inc
Themer – Easy way to add web fonts
• Add Google font URL to use web font
in your app
• Apply the web font to any component
24

25. © 2016 Sencha Inc
Theming Contest – Theme App to win $2500
• Download new contest app
https://www.sencha.com/sencha-theming-
contest-2016/
• Use Themer 1.1
• Theme App and send us your theme
at contest@sencha.com
25
New Theming Contest App

26. © 2016 Sencha Inc
Demo
Themer 1.1
26

27. © 2016 Sencha Inc
Q & A
27