ExtJS 6 provides tools to develop applications using a "universal" approach with both classic and modern toolkits. It allows building configurations for each toolkit, and runtime configurations called profiles that activate different views depending on conditions like device type. Profiles, platform configs, and responsive configs allow customizing elements like views and titles based on device characteristics like width, orientation, and desktop/mobile status.

1. your European technology advisoryour European
technology advis

2. Why ExtJS: Multiple Screens
Sencha ExtJs 6

3. • ExtJs 6 provides various tools and utilities to develop using the
“universal” approach
• Build config: classic and modern toolkits
• Runtime config: application profiles
Multiple Screens

4. Toolkits - Basic

5. • A toolkit is a package that contains only the visual part of the
framework (panels, buttons, grid, …)
• ExtJs 6 provides two different toolkits, also combined as “universal”
• classic: Contains visual components of ExtJs
• modern: Contains visual components of Sencha Touch
Toolkits - Definition

6. • With ExtJs 6 is possible to create an application that use the
universal toolkit
• Use universal toolkit mean use both toolkits at the same time
• Through app.json is possible to setup different configurations for
each toolkit
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-triton"
},
"modern": {
"toolkit": "modern",
"theme": "theme-neptune"
}
}
Toolkits - Universal

7. Multiple Screens / Runtime config
Sencha ExtJs 6

8. • Ext.app.Profile permits to create an entirely different view for your
application by activating a profile for specific conditions.
Ext.define('App.profile.Desktop', {
extend: 'Ext.app.Profile',
mainView: 'App.view.desktop.Main',
isActive: function () {
return Ext.os.is.Desktop;
},
launch: function () {
console.log('Launch Desktop');
}
});
• The isActive method is called to select the Profile to use.
• mainView and/or launch configs can be used to customise the
application
App Profiles

9. • platformConfig is a property that could be used in class declaration
for configuring objects depending on actual running device
platformConfig: {
desktop: {
title: 'Manufacturing Summary'
},
'!desktop': {
title: 'Mfg Summary'
}
}
• The idea is to offer a clear way to configure objects instead of using
ternary operator
Platform Configs

10. • responsiveConfig is a property that could be used in class
declaration for configuring objects depending on real time device
status
responsiveConfig: {
'width >= 600': {
title: 'Manufacturing Summary'
},
'width < 600': {
title: 'Mfg Summary'
}
}
• Responsive config works on a set of device config representing
type, orientation, physical informations and other similar stuffs
Responsive Configs

11. Demo
Sencha ExtJs 6

13. your European
technology advisor
indirizzo
Via Santa Maria Valle 3, 20123
Milano Italia
Gildeweg 39A 4383 NJ
Vlissingen Nederland
Goeman Borgesiuslaan 77
3515 ET Utrecht Nederland
telefono
+39 02 00681 028
email
marketing@ibuildings.it
support@ibuildings.it
your European
technology advisor