Sencha Touch application are build to use on wide variety of devices from phones to Tablets. Usually people prefer to use phone apps while out of the house to rapidly gather some information or to perform some action – often in a very short time. Writing separate apps for each platform is time consuming, error-prone and plain boring.
Thankfully, Sencha Touch’s Device Profiles give us a simple way to share between device types as much code as needed, while making it easy to customize behavior, appearance, and workflows for each device.
Note: If you are new to Sencha Touch then please refer to my post to get started with Sencha Touch
Setting Up Profiles
Step 01) Generate the initial start-up using following sencha Cmd command.
sencha generate app TechZoo c:\SenchaWeb\profile
Step 02) Go to profile folder and execute following commands to generate profiles.
sencha generate profile Phone repeat to create Tablet profile
sencha generate profile Tablet
if you go to profile directory, you will see sencha has created two js file, each containing configuration of its respective profile (phone and tablet)
This profile can have its own Model, View and controllers which can be invoked when sencha detect the current user profile.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
Ext.define(‘TechZoo.profile.Phone’, {
extend: ‘Ext.app.Profile’,
//define any additional classes your Profile needs here
config: {
name: ‘Phone’,
views: [‘MainView’],
models: [],
stores: [],
controllers: []
},
//this profile will be activated if we detect we’re running on a Phone
isActive: function(app) {
console.log(‘Phone profile avtive: ‘ + Ext.os.is(‘Phone’));
return Ext.os.is.Phone;
},
// Profile’s launch will execute before Ext.application#launch()
launch: function() {
var view = Ext.create(‘TechZoo.view.phone.MainView’);
view.down(‘titlebar’).setTitle(‘Current Profile : ‘ + this.getName());
Ext.Viewport.add(view);
}
});
|
Step 03) Create a Generic view called MainView which will serve as a Base Panel for Phone, Tablet views.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Ext.define(‘TechZoo.view.MainView’, {
extend : ‘Ext.Panel’,
xtype : ‘mainview’,
config: {
items : [{
docked: ‘top’,
xtype: ‘titlebar’,
title : ‘Sencha Touch Profile’
}],
styleHtmlContent : true,
title: ‘Generic version’,
html: ‘Generic Main View’
},
initialize: function() {
console.log(‘Generic MainView…’);
}
});
|
Now create Two views (one for each Profile) which extends our Main view to use the benefits of Inheritance.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
Ext.define(‘TechZoo.profile.Phone’, {
extend: ‘Ext.app.Profile’,
//define any additional classes your Profile needs here
config: {
name: ‘Phone’,
views: [‘MainView’],
models: [],
stores: [],
controllers: []
},
//this profile will be activated if we detect we’re running on a Phone
isActive: function(app) {
console.log(‘Phone profile avtive: ‘ + Ext.os.is(‘Phone’));
return Ext.os.is.Phone;
},
// Profile’s launch will execute before Ext.application#launch()
launch: function() {
var view = Ext.create(‘TechZoo.view.phone.MainView’);
view.down(‘titlebar’).setTitle(‘Current Profile : ‘ + this.getName());
Ext.Viewport.add(view);
}
});
|
Step 04) Update your app.js file to look similar to following.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
Ext.application({
name: ‘TechZoo’,
views: [‘MainView’],
requires : [‘Ext.TitleBar’],
profiles: [‘Phone’, ‘Tablet’],
icon: {
’57’: ‘resources/icons/Icon.png’,
’72’: ‘resources/icons/Icon ipad.png’,
‘114’: ‘resources/icons/Icon@2x.png’,
‘144’: ‘resources/icons/Icon ipad@2x.png’
},
isIconPrecomposed: true,
startupImage: {
‘320×460’: ‘resources/startup/320×460.jpg’,
‘640×920’: ‘resources/startup/640×920.png’,
‘768×1004’: ‘resources/startup/768×1004.png’,
‘748×1024’: ‘resources/startup/748×1024.png’,
‘1536×2008’: ‘resources/startup/1536×2008.png’,
‘1496×2048’: ‘resources/startup/1496×2048.png’
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly(‘appLoadingIndicator’).destroy();
console.log(‘launching app…’);
}
});
|
Step 05) You are all set now to view your app in Phone, Tablet profile.
Start Sencha Cmd in-build webserver using sencha web start and hit http://localhost:1841/profile/index.html?deviceType=Phone URL. Note that you can view the tablet profile by passing deviceType=Tablet in above URL.
Output
Hit http://localhost:1841/profile/index.html?deviceType=Phone URL to view Phone profile in Action.
and use http://localhost:1841/profile/index.html?deviceType=Tablet URL to view Phone profile in Action.
happy Coding 🙂
View Tablet Profile / View Phone Profile
Sencha-Touch-Device-Profile Download
Source techzoo.org
