Device check in sencha touch 2

Question

I'm sure I'm just overlooking this question but I cant seem to find how to check the device.
I want to check whether the device is either a phone, a tablet in landscape mode, a tablet in portrait mode or a other device (computer).

What I have is this:

if (Ext.platform.isPhone) {
    console.log("phone");
}

if (Ext.platform.isTablet) {
    console.log("tablet");
}

var x = Ext.platform;

But platform is undefined (probably because this is the way of Sencha Touch 1).

Does anyone know the correct place for me to access the device check?

Answer 1

Sencha Environment Detection offers a large spectrum through simple means.

Instead of Ext.os.is.Tablet, you can make life easier via Ext.os.deviceType which will return:

• Phone
• Tablet
• Desktop

NB: this value can also be fudged by adding "?deviceType=" to the url.

http://localhost/mypage.html?deviceType=Tablet

Ext.os.name is the singleton returning:

• iOS
• Android
• webOS
• BlackBerry
• RIMTablet
• MacOS
• Windows
• Linux
• Bada
• Other

The usual ability of browser detection is available through Ext.browser.name.

Something I've only recently encountered, which I love is feature detection - allowing coding similar to Modernizr / YepNope based off ability of device. Ext.feature offers:

• Ext.feature.has.Audio
• Ext.feature.has.Canvas
• Ext.feature.has.ClassList
• Ext.feature.has.CreateContextualFragment
• Ext.feature.has.Css3dTransforms
• Ext.feature.has.CssAnimations
• Ext.feature.has.CssTransforms
• Ext.feature.has.CssTransitions
• Ext.feature.has.DeviceMotion
• Ext.feature.has.Geolocation
• Ext.feature.has.History
• Ext.feature.has.Orientation
• Ext.feature.has.OrientationChange
• Ext.feature.has.Range
• Ext.feature.has.SqlDatabase
• Ext.feature.has.Svg
• Ext.feature.has.Touch
• Ext.feature.has.Video
• Ext.feature.has.Vml
• Ext.feature.has.WebSockets

To detect fullscreen/app/homescreen browser mode on iOS:

window.navigator.standalone == true

Orientation Ext.device.Orientation and orientation change:

Ext.device.Orientation.on({
    scope: this,
    orientationchange: function(e) {
        console.log('Alpha: ', e.alpha);
        console.log('Beta: ', e.beta);
        console.log('Gamma: ', e.gamma);
    }
});

Orientation is based on Viewport. I usually add a listener which is more reliable:

   onOrientationChange: function(viewport, orientation, width, height) {
        // test trigger and values
        console.log('o:' + orientation + ' w:' + width + ' h:' + height);

        if (width > height) {
            orientation = 'landscape';
        } else {
            orientation = 'portrait';
        }
        // add handlers here...
    }

Answer 2

Use Ext.env.OS's is() method.

Note that only major component and simplified value of the version are available via direct property checking. Supported values are: iOS, iPad, iPhone, iPod, Android, WebOS, BlackBerry, Bada, MacOS, Windows, Linux and Other

if (Ext.os.is('Android')) { ... }
if (Ext.os.is.Android2) { ... } // Equivalent to (Ext.os.is.Android && Ext.os.version.equals(2))

if (Ext.os.is.iOS32) { ... } // Equivalent to (Ext.os.is.iOS && Ext.os.version.equals(3.2))

---

Alternatively, you can also use PhoneGap Device API

Answer 3

I found the answer to it:

What seems to be the case is that Ext.os.is.(tablet/phone or something else) is true or undefined. If it is not the case it will be undefined. I.a. Ext.os.is.Tablet is true when on a tablet and undefined when not.

So this is the answer I was looking for

if(Ext.os.is.Tablet){
        this._bIsTablet = true;
    }else if(Ext.os.is.Phone){
        this._bIsPhone = true;
    }else{
        this._bIsOther = true;
    }