Advertise with us

Determining the features supported by browser in Sencha touch

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

Determining the features supported by browser in Sencha touch

 

Last updated:9/7/2019 12:14:24 AM

0 Comments

Leave Comment