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

 

  Modified On Nov-29-2017 07:09:57 AM

Leave Comment