In this article, I’m explaining how to know what features are supported by user’s device browser in sencha touch.
Ext.feature is a simple class to verify if a browser feature exists or not on the current device.
Example
Step-1:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
feature: 'Audio',
value: Ext.feature.has.Audio
},
{
feature: 'Canvas',
value: Ext.feature.has.Canvas
},
{
feature: 'ClassList',
value: Ext.feature.has.ClassList
},
{
feature: 'CreateContextualFragment',
value: Ext.feature.has.CreateContextualFragment
},
{
feature: 'Css3dTransforms',
value: Ext.feature.has.Css3dTransforms
},
{
feature: 'CssAnimations',
value: Ext.feature.has.CssAnimations
},
{
feature: 'CssTransforms',
value: Ext.feature.has.CssTransforms
},
{
feature: 'CssTransitions',
value: Ext.feature.has.CssTransitions
},
{
feature: 'DeviceMotion',
value: Ext.feature.has.DeviceMotion
},
{
feature: 'Geolocation',
value: Ext.feature.has.Geolocation
},
{
feature: 'History',
value: Ext.feature.has.History
},
{
feature: 'Orientation',
value: Ext.feature.has.Orientation
},
{
feature: 'OrientationChange',
value: Ext.feature.has.OrientationChange
},
{
feature: 'Range',
value: Ext.feature.has.Range
},
{
feature: 'SqlDatabase',
value: Ext.feature.has.SqlDatabase
},
{
feature: 'Svg',
value: Ext.feature.has.Svg
},
{
feature: 'Touch',
value: Ext.feature.has.Touch
},
{
feature: 'Video',
value: Ext.feature.has.Video
},
{
feature: 'Vml',
value: Ext.feature.has.Vml
},
{
feature: 'WebSockets',
value: Ext.feature.has.WebSockets
}
],
storeId: 'MyStore',
fields: [
{
name: 'feature'
},
{
name: 'value'
}
],
sorters: {
property: 'feature'
}
}
});Step-2:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'MyStore',
itemTpl: [
'{feature}: <code>{value}</code>'
],
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Features Supported By Browser'
}
]
}
});Output
Leave a Comment