PDA

View Full Version : Detecting Platform (Tablet/Desktop/Phone) in ExtJs 5.1



iantonio
2 Mar 2015, 10:00 AM
Hi guys, I'm trying to get an efficient way of differentiating a hardware type (specifically Tablet vs Phone); and thus far it has been troublesome. I've tried following:

1) Using 'platformConfig' attribute like this:


platformConfig: {
'desktop': {
html: 'Hellou- Desktop version'
},
'phone': {
html: 'Hellou - Mobile Mobile :)'
},
'tablet': {
html: 'Hellou- Tablet :)'
}
}, ...
This yields unsatisfactory results because tablet and phone yields false results
more often than not



2) I've also tried using Profiles like this:


Ext.define('TutorialApp.profile.Phone', {
extend: 'Ext.app.Profile',
isActive: function() {
return (Ext.os.deviceType === 'Phone') ;
// alternatively, I also tried with Ext.os.is.Phone
},
launch: function() {
alert('Phone!!!');
}
});
Similarly as before, this type of profile works sometimes, but more often than not tablets and phones aren't propery differentited (as a curious sidenote, the results differ from their equivalents using the platformConfig option)


So my question is (and sorry if it was already answered), what can/should I do to properly rely on this plataform detection tools offered by the ExtJs 5.1 framework ??

PS: I've been using the in-Browser Google Chrome's v 40.0.2214.115 emulator, for the different devices; so there is also a chance that the unwanted results are due to the emulator and not to the ExtJs software.

Any help will be greatly appreciated!

suzuki1100nz
2 Mar 2015, 10:15 AM
Hi,

We also have struck issues with the chrome emulator and Sencha device detection.
We use the emulator to test ExtJS 5 and tablets.
We could only get Sencha to identify it as a tablet using the emulator when using the Google Nexus 10 setting.

Havent tried the phone settings in the emulator.
To lighten our login web page we ended up not using the ExtJS library and did a vanilla html page using Modernizr for device detection.
Using a modernizr custom build meant we could make our login landing page very light and save having to load the full ExtJS library (yes we used CMD to build and make the library smaller but its still much larger than a modernizr custom build).

iantonio
3 Mar 2015, 2:30 AM
Hello,Yup, that looks like a sensible approach.

Looking at the code for device detection, Sencha is using the "navigator.platform" property, which in google Chrome remains unchanged even after switching devices on the emulator. There is even an open issue here (https://code.google.com/p/chromium/issues/detail?id=403257) that doesn't seem they'll address anytime soon due to maintenance costs.

I guess I'll try to find another emulator or use another library for device detection if that doesn't work.

Thanks for the fast response and for sheeding light into the direction of faulting emulation in Chrome.