---
title: "Browser Information in Sencha Touch"  
description: "In this article, I’m explaining how to get the device’s browser information in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-10  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1319/browser-information-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 6 minutes  

---

# Browser Information in Sencha Touch

In this article, I’m explaining how to get the device’s browser information in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

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](https://www.mindstick.com/articles/12845/things-to-remember-while-migrating-odoo-to-a-better-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](https://www.mindstick.com/forum/160061/what-is-javascript-strict-mode-and-why-is-it-used). |
| 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](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer) and set the [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) 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](https://www.mindstick.com/forum/34127/extjs-how-to-set-border-for-the-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](https://www.mindstick.com/mindstickarticle/7e39acbb-7f96-4dc2-8578-cb2322f1ceaa/images/aab0fb0b-6b77-4560-80f9-6141f1ec8cf2.png)

---

Original Source: https://www.mindstick.com/articles/1319/browser-information-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.