In this article, I’m explaining how to determine the operating system of user’s device in sencha touch.
Ext.os class provides useful information about the current operating system environment.
Example
Step-1:
Firstly create a store and named it OperatingSystemStore, add two fields name and value through field configuration of the store and data through data configuration.
Ext.define('MyApp.store.OperatingSystemStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
name: 'iOS',
value: Ext.os.is('iOS')
},
{
name: 'iPad',
value: Ext.os.is('iPad')
},
{
name: 'iPhone',
value: Ext.os.is('iPhone')
},
{
name: 'iPod',
value: Ext.os.is('iPod')
},
{
name: 'Android',
value: Ext.os.is('Android')
},
{
name: 'WebOS',
value: Ext.os.is('WebOS')
},
{
name: 'BlackBerry',
value: Ext.os.is('Bada')
},
{
name: 'MacOS',
value: Ext.os.is('MacOS')
},
{
name: 'RIMTablet',
value: Ext.os.is('RIMTablet')
},
{
name: 'Windows',
value: Ext.os.is('Windows')
},
{
name: 'Linux',
value: Ext.os.is('Linux')
},
{
name: 'Other',
value: Ext.os.is('Other')
}
],
storeId: 'OperatingSystemStore',
fields: [
{
name: 'name'
},
{
name: 'value'
}
]
}
});Step-2:
Next drag-n-drop the list component from the toolbox and add a titlebar for heading purpose , the titlebar will hold a button named Know Your OS, tapping on this button tell you your device’s operating system.
Ext.define('MyApp.view.OSList', {
extend: 'Ext.dataview.List',
config: {
fullscreen: true,
store: 'OperatingSystemStore',
itemTpl: [
'{name}: <code>{value}</code>'
],
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Operating System',
items: [
{
xtype: 'button',
id: 'KnowYourOS',
itemId: 'mybutton',
text: 'Know Your OS'
}
]
}
],
listeners: [
{
fn: 'onKnowYourOSTap',
event: 'tap',
delegate: '#KnowYourOS'
}
]
},
onKnowYourOSTap: function(button, e, eOpts) {
Ext.Msg.alert('You are using ' + Ext.os.name);
}
});Output
Tap on the Know Your OS button, you will get a message with the name of your device’s operating system.
Leave Comment