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
Leave Comment