Archives

Now that hybrid touch pc’s / tablets, like the Windows Surface Pro, got popular, I often hear people asking me, if it’s possible to create Ext JS apps for Windows tablets?
Ext JS 6 has support for Windows 10. The classic toolkit supports IE8 and up, and the modern toolkit supports the Edge browser. It even contains a Windows mobile theme!

Ext JS 6 is also the framework, with supports you by creating universal apps. With one code base you can create Windows desktop apps for mouse and keyboard usage, and tablet interface for touch usage.

You can set the tablet theme to windows mobile, or in case you prefer to make use of the classic toolkit, then switch the theme to “theme-crisp-touch” for more whitespace around buttons and links, and bigger icons and buttons. So you won’t miss tap.

My index.html file, has an Ext.beforeLoad method, that looks like this:

It would be nicer, if my device can detect this mode switch programmatically. Unfortunately, by the time of writing there is no HTML5 / JavaScript API solution, which can detect mode changes. I tried to look into projects like Apache Cordova, to figure out if there are native API solutions, but I couldn’t find it either.

I can’t check on touch input either, because on a hybrid machine, like the surface pro, touch input works regardless switching the mode, since the screen is just a touch screen.
So navigator.pointerEnabled will always return true.

So for now, we are left with a trick. It’s a smart trick though. And it won’t work in IE11 or below.
Which is ok, since for our demo, we will make use of the modern toolkit for tablet mode, and modern toolkit is for modern browsers, like Microsoft Edge.

However, it won’t work in any other browser either. So not, in Google Chrome or Firefox. For those browsers, you will have to stick with the button switch approach.
This might be an ok solution for you, since we are talking here about developing universal windows apps.

In tablet mode; there is no browser scrollbar. The browser scrollbar will be 0, while on desktop mode, it will be a value in pixels. (like 12px).
Now, user: robocat created a working JavaScript example in a JSBin, where you can see a working demo: https://output.jsbin.com/puseco. The trick here, is to add an hidden div to your page body with overflow scroll, to start calculating the scrollWidth.
Now I was super amazed and surprised, but apparently Ext JS already has a built-in function like this! Yay. So you only need to call: Ext.getScrollbarSize(true) where you are forcing it to re-check it: http://docs.sencha.com/extjs/6.0.0/classic/Ext.html#method-getScrollbarSize

Let’s finish this article with a bonus topic. Sencha has responsiveConfig to change configuration on runtime, based on criteria. http://docs.sencha.com/extjs/6.0.0/classic/Ext.plugin.Responsive.htm. Responsive Design in Ext JS, means it’s JavaScript configuration, which means that you can write any type of criteria. It also means, that you can change anything you like on runtime. This doesn’t necessary means that you have to change the look and feel. You can change anything, so for example also load different models, redraw or refresh a page. (..because you can override a setter/update method).
Here’s a simple example. Any property can be configured as long as it has an setter under the hood. (if not, you can create your own setters of course.)

tall — Viewport width < height regardless of device typewide — Viewport width > height regardless of device type.landscape — Like wide, but always true on desktop devicesportrait — Like tall, but always false on desktop deviceswidth — An expression that tests for the specific width of the viewportheight— An expression that tests for the specific height of the viewportplatform — An object containing various booleans describing the platform

I have used this example, for example in a chart. On a touch device I use pinch to zoom, and on a mouse and keyboard device, I use the crosshair interaction.
Although this is a great example, it would make less sense for a windows universal app, since hybrid tablet PCs have both interfaces: touch and mouse/keyboard support.
Maybe you are creating an interface that needs to support mouse/keyboard or touch support.
Do you have a tablet/pc hybrid and want to play around with this? Here’s my project on Github to fork:

(PS: I own a Microsoft Surface Pro 4, and the best thing of it, is it’s keyboard. 😉 - As a small hybrid touch windows PC it’s great. As a tablet, it really sucks. No matter to what mode you switch it, it feels and breaths like a PC with touch support. Certain things in Windows are designed for mouse and keyboard usage. And also, the way how it boots, load times etc, it just shows you, it’s a PC. ..but a really good one.)