1. What’s New in Sencha Themer 1.2
and Architect 4.2
Sandeep Adwankar
Sr. Product Manager
2. Sencha Themer
• Design themes in an interactive visual
environment – no code
• Quick configurations for global variables
that cascade across all components
• Support for component Uis
• Live updates – No compile, build, reload
• Package themes, and share with ease
2
3. Sencha Themer 1.2 – What’s New
• Support for Ext JS 6.5 and Cmd 6.5
• Create amazing looking applications
with 300+ new Sass Variables
• Easily theme new Ext JS 6.5 modern
components - Dialog, Date Panel
• Style enhanced form validations and
menus
• Support for ExtReact based applications
3
4. Themer 1.2 – Theme new Ext JS 6.5 components
• Easily theme datepanel borders, panel
headers, panel body, panel cell, panel
focused cell, caption
• Easily theme Dialog header, body, and
tool, as well as different states of tools –
disabled, hovered, pressed, and focused
• Uniquely theme each of these new
components with “ui” config
4
5. Themer 1.2 – Theme Form Validations and Menu
• Style Form error validations with error
message fonts, line heights
• Style Menu header, icon colors, menu
body, menu item
5
6. Themer 1.2 - Theme ExtReact Components
• Theme all ExtReact components for
React application
• Create UIs for distinct look and feel of
ExtReact components
6
7. Inspect and Style with Component Tree
• Directly connect app to Themer with
bookmarketlet or app.json changes
• In “Inspect” mode, click on the app and
view component tree
• View and modify selected component’s
styles and UIs
7
8. Easily Theme Grids and Make Them Unique
• Visually theme grid cells, rows, columns,
column header, paging toolbar
• Uniquely theme each of the grid
subcomponents
8
10. Sencha Architect
• Drag-n-drop visual app builder
• Best practices code generator that
minimizes manual coding
• Support for premium components
including D3, Pivot Grid, Calendar,
Exporter
• Integrates Cordova for hybrid apps
11. Architect 4.2 – What’s New
• Support for Ext JS 6.5 and Cmd 6.5
• Visually build apps with new Ext JS
components , plugins and configs
• Create apps with ES6 code
• Import themes from Themer 1.2
11
12. Architect 4.2 – Drag and drop new Ext JS Components
• Drag and drop new components Dialog
and Date Panel
• Easily configure components and plugins
using config panel
12
13. Architect 4.2 – Visually configure new Grid Configs
• Use new Grid configs to allow users to
select rows, cells, or columns
• Each of these selection modes is now
configurable using the simple new
selectable config
13
14. Architect 4.2 – Write ES6 code in updated code editor
• Write code using arrow functions, the let
keyword, object de-structuring, and
many of the cool new features in ES6
• As you save an Architect project, Cmd
compiles and transpiles your code
14
15. Architect 4.2 – Import themes from Themer 1.2
• Easily import custom themes created
using Sencha Themer
• Architect copies theme package and
applies theme to app
15
Take a look what’s new in Sencha Tools, and what’s on the on the horizon for Tools. We will demonstrate the innovations in Sencha Cmd, Architect, Themer, and our new plugin for Visual Studio Code. We will also discuss the Ext Electron Package for native desktop packaging, and what we have planned for adopting the modern and open web tooling based on NodeJS, NPM and Webpack.