Device check in sencha touch 2

sencha-touch-2

Solution

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...
    }

Problem

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?

Original source