Home > DeveloperSection > Articles > Determining the features supported by browser in Sencha touch

Determining the features supported by browser in Sencha touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 1782  View(s)
Rate this:

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

 


Don't want to miss updates? Please click the below button!

Follow MindStick