Chrome 43 breaks Ext.menu.Menu submenus in Ext JS 4 and how to fix it.

Posted on in Ext JS

A few days ago, I mentioned Chrome 43 which breaks a couple of things in Sencha Touch 2.4.
Unfortunately also Ext JS 4 developers, experienced some problems.

Google Chrome version 43 breaks the Ext.menu.Menu submenus, when hovering over the items.
Currently our engineers are working on a solution. As soon as it's fixed, you will be able to download a nightly build, which you can download from our support portal. For now, please use this override as a fix:

Ext.define('MyApp.utils.MenuOverride', {
    override: 'Ext.menu.Menu',
    onMouseLeave: function(e) {
        var me = this;
        // BEGIN FIX
        var visibleSubmenu = false;
        me.items.each(function(item) {
            if (item.menu && item.menu.isVisible()) {
                visibleSubmenu = true;
            }
        })
        if (visibleSubmenu) {
            return;
        }
        // END FIX
        me.deactivateActiveItem();
        if (me.disabled) {
            return;
        }
        me.fireEvent('mouseleave', me, e);
    }
})

Put this file in the app/utils/ folder. (and give it the name: "MenuOverride.js").
It should fix the problem..

Chrome 43 breaks Sencha Touch / modern toolkit and how to fix it.

Posted on in Ext JS 6 Sencha Touch

Lately, I received a couple of questions about the latest Chrome 43.x
version, which breaks Sencha Touch 2.4 apps (or Ext JS 6 modern toolkit apps) due the deprecation of the overflowchanged event.

It actually breaks the following classes: Ext.util.PaintMonitor and Ext.util.SizeMonitor.
You will notice this bug when trying to scroll in a list component.
You will see a small square in the top right corner, instead of the familiar scroll bar, and it's impossible to scroll.

As the day of writing this blogpost, Sencha is currently fixing this bug in Sencha Touch and in Ext JS 6 modern toolkit.
When you are a Sencha support subscriber, you will have access to our support portal, and probably by the time of reading this, you will be able to download the latest nightly build, which includes this fix.

If you can't wait, and temporary want to fix this issue, (for example because it's blocking you from development) you can use an override. You can use the following override classes. (PaintMonitor and SizeMonitor).
Just require these in your app.js.
I am hosting an example app on Github, feel free to clone it:
https://github.com/savelee/senchatouch-chrome43.

Thanks Trevor Brindle, for sharing parts of your solution.

There is another small problem with the load spinner in Sencha Touch applications; Ext.LoadMask is no longer animated.
This is a simple fix in the Sass (touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss) the prefixes for keyframe and transform aren't used anymore.
In case you want to quickfix this in your app, you can add the following styles to your application stylesheet (and make a build):
app.scss

Again, this probably will be fixed in the latest nightly build.
So if possible, switch to that, instead of manually patching stuff.

For further information about these Chrome changes, take a look into the links below.