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

  Modified On Nov-29-2017 11:14:34 PM

Leave Comment