Ext version tested:

  • Modern Ext 6.1.250



Browser versions tested against:

  • Android 5.1.1 Chrome 49
  • Android 4.4.2 Chrome 49



DOCTYPE tested against:

  • HTML



Description:
Responsive items won't be updated when Android keyboard is visible.
Create a component with landscape and portrait responsive configs, and then set focus on a textfield so that keyboard pops up. Now when rotating the device the resonsive config items will only be updated to a new orientation after textfield has lost its focus and keyboard isn't visible anymore.

This seems to be happening because, Ext.dom.Element won't update viewport size properly when the keyboard is showing. And because of this Ext.GlobaEvents.fireResize won't fire the resize event because it thinks the view is still same size. I got it to work even when keyboard is up by doing this override:

Code:
Ext.define('Override.Element', {
    override: 'Ext.dom.Element',
    inheritableStatics: {
        getViewportHeight: function(){
            return window.innerHeight;
        },

        getViewportWidth: function(){
            return window.innerWidth;
        }
    }
});
Fiddle can be found here https://fiddle.sencha.com/#fiddle/17lr
In order to see that fiddle with an Android device you must spoof your user agent (I was unable to access that page on normal mobile device).
This can be done with chrome and following instructions in this link https://developer.chrome.com/devtool...mote-debugging
You can change the user agent on the Network Conditions tab. Uncheck the 'Select automatically' box and select something like 'Chrome - Windows' from the dropdown.

This was tested on two different Android devices running Android 4.4.2 and 5.1.1.

Steps to reproduce the problem:

  • Go to the fiddle above with an Android device.
  • Hide the code so that example shows in full view.
  • Rotate the device, and colored bar should change between red and green.
  • Press Test inputfield so that keyboard is visible.
  • Rotate the device, and bar won't change color.
  • Unfocus the inputfield by pressing somewhere on the screen.
  • Bar changes to right color for the orientation.