Checking sencha touch 2 device

Question

I am sure that I am simply losing sight of this question, but I cannot find how to test the device.
I want to check whether the device is a phone, a tablet in landscape mode, a tablet in portrait mode, or another device (computer).

What I have:

if (Ext.platform.isPhone) { console.log("phone"); } if (Ext.platform.isTablet) { console.log("tablet"); } var x = Ext.platform; 

But the platform is undefined (perhaps because this is Sencha Touch 1's way).

Does anyone know a suitable place to access device verification?

Answer 1

Sencha Environment Detection offers a wide range with simple tools.

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

• Phone
• Tablet
• Desktop

NB: this value can also be corrupted by adding "? DeviceType =" to the URL.

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

Ext.os.name returns a single element:

• IOS
• Android
• WebOS
• Blackberry
• RIMTablet
• MacOS
• for windows
• Linux
• Bada
• Other

The usual browser discovery ability is available through Ext.browser.name .

Something that I just recently encountered that I like is a feature detection that allows you to encode, similar to Modernizr / YepNope, based on the ability of the 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 / browser / home screen mode in iOS:

 window.navigator.standalone == true 

Orientation Ext.device.Orientation and change orientation:

 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 more reliable listener:

  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 the Ext.env.OS is() method.

Please note that only the main component and simplified version value is available through direct property checking. Supported values: iOS, iPad, iPhone, iPod, Android, WebOS, BlackBerry, Bada, MacOS, Windows, Linux and others

 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 the PhoneGap Device API

Answer 3

I found the answer to it:

Something like Ext.os.is. (tablet / phone or something else) true or undefined. If it is not, it will be undefined. I.A. Ext.os.is.Tablet true if on the tablet and undefined if 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; }