Home > DeveloperSection > Articles > Determining the Operating System of User’s Device in Sencha Touch

Determining the Operating System of User’s Device in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 4410  View(s)
Rate this:

Determining the Operating System of User’s Device in Sencha Touch

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

Determining the Operating System of User’s Device in Sencha Touch

Tap on the Know Your OS button, you will get a message with the name of your device’s operating system.

Determining the Operating System of User’s Device in Sencha Touch


Don't want to miss updates? Please click the below button!

Follow MindStick