How to automatically switch between modern and classic app ExtJs

Question

I have a method which switch into modern version after click on button:

 Ext.beforeLoad = function (tags) {
        var s = location.search,  // the query string (ex "?foo=1&bar")
            profile;

        if (s.match(/\bclassic\b/)) {
            profile = 'classic';
        }
        else if (s.match(/\bmodern\b/)) {
            profile = 'modern';
        }

        else {               
            profile = tags.phone ? 'modern' : 'classic';
        }

        Ext.manifest = profile; // this name must match a build profile name

    };

That code set profile before load page. And I add parameter using method:

onSwitchToClassicConfirmed: function (choice) {
    if (choice === 'yes') {
        var s = location.search;

        // Strip "?modern" or "&modern" with optionally more "&foo" tokens following
        // and ensure we don't start with "?".
        s = s.replace(/(^\?|&)modern($|&)/, '').replace(/^\?/, '');

        // Add "?classic&" before the remaining tokens and strip & if there are none.
        location.search = ('?classic&' + s).replace(/&$/, '');
    }
}

But I want automatically switch between modern and classic screen if device is phone or tablet.

Answer 1

Have a look at Ext.os.deviceType property, it contains informations of the current device.
Description from the docs:

The generic type of the current device.

Possible values:

• Phone
• Tablet
• Desktop

With the information you can set the profile

var profile = Ext.os.deviceType === "Phone" ? "modern" : "classic";