Home > DeveloperSection > Articles > Browser Information in Sencha Touch

Browser Information in Sencha Touch


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

Browser Information in Sencha Touch

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


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

Follow MindStick