Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

Thread: New version Sencha Touch 2.3 - Orientationchange event does not fire on Viewport

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-4978 in 2.4.2.
  1. #11
    Sencha User
    Join Date
    Mar 2012
    Posts
    3

    Default

    The workaround leads to a new error:
    I've got a textfield (username textfield) for a login view. Now the textfield fires (only on some(?) Android devices) a blur event if you click in the textfield. So a focus and directly afterwards a blur event is being fired.

    The issue is mainly a problem because I've got a landscape and a portrait login view which I switch on orientationchange of the viewport. But the showing of the keyboard seems to fire a 'resize' event of the viewport finally leading to an orientationchange event of the viewport as soon as the keyboard appears. Then the view is determined as a landscape view and the landscape view is shown.

  2. #12
    Sencha User
    Join Date
    Mar 2007
    Posts
    448

    Default

    @fmoseley: Can someone please look at this? It's been a few months since this was reported.

    Even with the workaround suggested above, there are issues. For example, load the following application in the Android browser:

    Code:
    Ext.application({   
    	launch: function() {
    		Ext.Viewport.bodyElement.on('resize', Ext.emptyFn, this, { buffer: 1});
    		Ext.Viewport.add({
    			xtype:'panel',
    			html:'<input type="text" />'
    		});
    		Ext.Viewport.on('orientationchange', function() {
    			alert('orientation change');
    		});
    	}
    });
    When you load the page, tap inside the text field. You'll immediately get an orientationchange event, which is wrong. Then tap ouside the field to hide the keyboard, and rotate the phone. From this point on, you won't get any orientationchange events anymore.

    I know these Android browser issues are tricky, but they're very important to anyone using Cordova/PhoneGap.

    Tested on a Galaxy Nexus with Android 4.3.

  3. #13
    Sencha User
    Join Date
    Mar 2007
    Posts
    448

    Default

    I added some logging to try to figure this out. I noticed that when Ext.viewport.Android.onResize() is first called, this.windowWidth and this.windowHeight are both 0. This continues until the first orientationchange event is fired, and it messes with the logic for firing this event.

    The updateSize() method, which sets these values, looks like it's called too early. I added another call to it after this.render(), and that seems to set the values correctly.

    Code:
    Ext.define('app.viewport.Android', {
    	override: 'Ext.viewport.Android',
    	onReady: function() {
    		if (this.getAutoRender()) {
    			this.render();
    			this.updateSize(); // added this
    		}
    		if (Ext.browser.name == 'ChromeiOS') {
    			this.setHeight('-webkit-calc(100% - ' + ((window.outerHeight - window.innerHeight) / 2) + 'px)');
    		}
    	}
    });
    I also still needed to call Ext.Viewport.bodyElement.on('resize', Ext.emptyFn) in my app's launch() method, as suggested earlier in this thread. If I didn't, Ext.viewport.Android.onResize() wouldn't get called. I couldn't figure out why this was the case.

    I have no idea whether these changes will reliably fix the issue, or whether they will cause bad side-effects. They seem to work so far. Would love some feedback from Sencha on this.

  4. #14
    Sencha User
    Join Date
    Dec 2013
    Posts
    17

    Default

    Hi,
    i've tried jweber's solution with not positive result.
    Yesterday i've read this post so today i've implemented it. That solution has solved the problem of orientation change for me....but...there is still a little problem. The event is fired the second time i rotate my tablet. Making some debug i found that in the in Android stock browser the getWindowWidth and getWindowHeight are booth 0 on application start, so the orientation value is wrong, the fireOrientationChangeEvent function doesn't get fired, and so on...


    To solve this issue i've modified the solution linked above forcing the call of updateSize function and then re-initializing the Ext.Viewport.orientation value.

    Code:
    if (Ext.versions.touch.major >= 2 && Ext.versions.touch.minor > 0 &&
                  Ext.os.is.Android && !Ext.browser.is.ChromeMobile) {
                Ext.Viewport.getWindowWidth = function() {return window.innerWidth;};
                Ext.Viewport.getWindowHeight = function() {return window.innerHeight;};
                Ext.Viewport.addWindowListener('resize',Ext.Function.bind(Ext.Viewport.onResize, Ext.Viewport));
    
    
                Ext.Viewport.updateSize();                                      //added
                Ext.Viewport.orientation = Ext.Viewport.determineOrientation(); //added
    }
    I hope the Sencha team will solve this bug soon.

    Tested on Samsung Galaxy Tab 2 with Android 4.2.2

  5. #15
    Sencha User
    Join Date
    Oct 2013
    Location
    France
    Posts
    36

    Default

    Quote Originally Posted by yupitz View Post
    Hi,
    Code:
    if (Ext.versions.touch.major >= 2 && Ext.versions.touch.minor > 0 &&
                  Ext.os.is.Android && !Ext.browser.is.ChromeMobile) {
                Ext.Viewport.getWindowWidth = function() {return window.innerWidth;};
                Ext.Viewport.getWindowHeight = function() {return window.innerHeight;};
                Ext.Viewport.addWindowListener('resize',Ext.Function.bind(Ext.Viewport.onResize, Ext.Viewport));
    
    
                Ext.Viewport.updateSize();                                      //added
                Ext.Viewport.orientation = Ext.Viewport.determineOrientation(); //added
    }
    It works ! Thanks

  6. #16
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    53

    Default Still broken

    Any estimate on when this will be fixed? Seems like a rather important feature, as mobile users do tend to change orientation.

    Doesn't work in Chrome on Desktop either.

  7. #17

    Default

    if you using cordova, try this solution

    in mainActivity.java -> http://pastebin.com/Xme80VjC

    in app.js -> document.addEventListener("androidorientationchange", handler, false);

    PHP Code:
    handler: function(e) {
      var 
    clsPrefix Ext.baseCSSPrefix;

            
    Ext.getBody().replaceCls(clsPrefix e.oldOrientationclsPrefix e.newOrientation);
     
            
    // call sencha orientationchange handler if it exist        
            
    onOrientationChanged(nulle.newOrientation00);} 
    works like a charm!!!

    for me enough that now classes switching, but you can send to js from native side screen size, just put it in jsonObject (don't forget android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" in androidManifest.xml)...

  8. #18
    Sencha Premium Member
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    591

    Default

    It baffles me that a bug this significant is still sitting around unfixed. Is this fixed for 2.3.2 ? Also, is this one of those bugs where there's a fix but it's being held back for support subscribers only? If so fine that's Sencha's right 100%, would just like to know so I can consider a support subscription if this happens for bugs of this significance on a frequent basis.
    ExtJS Websql/Sqlite/IndexedDB/Dynamic proxies: https://github.com/shepsii/extjs-db-proxies

  9. #19
    Sencha User
    Join Date
    Feb 2011
    Location
    Roma
    Posts
    2

    Default Confirm workaround

    Yes workaround #8 works fine for me too on Android !!!

  10. #20

    Default

    Same here: I plugged in the bit of code from #8 and the orientationchange event now fires like it should. Thanks!

Page 2 of 3 FirstFirst 123 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •