articles

Home / DeveloperSection / Articles / Browser Information in Sencha Touch

Browser Information in Sencha Touch

Sumit Kesarwani3735 10-Jun-2013

In this article, I’m explaining how to get the device’s browser information in sencha touch.

Ext.browser class provides the useful information about the device’s current browser.

Properties:
Property Name
Return Type
Description

engineName

String

Full name of current browser.

engineVersion

Ext.Version

Gives the version of browser.

isSecure

Boolean

True if page is running in SSL.

isStrict

Boolean

True if browser is using the strict mode.

name

String

Name of the browser

 Example

Step-1:

First create a store with two fields name and value and add a sorter through sorters configuration and set the property to name so that it will sort according to the name. Add data to the store through data configuration.

Ext.define('MyApp.store.MyStore', {

    extend: 'Ext.data.Store',
 
    config: {
        data: [
            {
                name: 'engineName',
                value: Ext.browser.engineName
            },
            {
                name: 'engineVersion',
                value: Ext.browser.engineVersion
            },
            {
                name: 'isSecure',
                value: Ext.browser.isSecure
            },
            {
                name: 'isStrict',
                value: Ext.browser.isStrict
            },
            {
                name: 'name',
                value: Ext.browser.name
            },
            {
                name: 'userAgent',
                value: Ext.browser.userAgent
            },
            {
                name: 'version',
                value: Ext.browser.version.toString()
            },
            {
                name: 'is.Firefox',
                value: Ext.browser.is.Firefox
            },
            {
                name: 'is.IE',
                value: Ext.browser.is.IE
            },
            {
                name: 'is.Chrome',
                value: Ext.browser.is.Chrome
            },
            {
                name: 'is.Safari',
                value: Ext.browser.is.Safari
            },
            {
                name: 'is.Opera',
                value: Ext.browser.is.Opera
            },
            {
                name: 'is.Dolfin',
                value: Ext.browser.is.Dolfin
            },
            {
                name: 'is.webOSBrowser',
                value: Ext.browser.is.webOSBrowser
            },
            {
                name: 'is.ChromeMobile',
                value: Ext.browser.is.ChromeMobile
            },
            {
                name: 'is.Silk',
                value: Ext.browser.is.Silk
            },
            {
                name: 'is.Other',
                value: Ext.browser.is.Other
            }
        ],
        storeId: 'MyStore',
        sorters: {
            property: 'name'
        },
        fields: [
            {
                name: 'name'
            },
            {
                name: 'value'
            }
        ]
    }
});

 Step-2:

Next add a container to the project. Drag-n-drop a titlebar and list to the container, titlebar gives the title to the list.

Ext.define('MyApp.view.MyContainer', {

    extend: 'Ext.Container',
 
    config: {
        fullscreen: true,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                height: 45,
                title: 'Browser Information'
            },
            {
                xtype: 'list',
                fullscreen: false,
                height: 273,
                id: 'BrowserInfoList',
                scrollable: true,
                itemTpl: [
                    '{name} : <code>{value}</code>'
                ],
                store: 'MyStore'
            }
        ]
    }
});

 Output 

Browser Information in Sencha Touch


Updated 07-Sep-2019

Leave Comment

Comments

Liked By