Off-Canvas Menu in Sencha Touch 2.3 ('setMenu') doesn't work on Android 2.3

Question

I've implemented the new Menu Component setMenu(menu, config). It works perfectly on Android 4.x, iOS6 and iOS7, but it doesn't work properly on Android 2.3 (neither on device nor on emulator). I've followed the sample code of their sample in kitchen sink.

Is anyone out there who got this working on Android 2.3?

I've put together a small sample and this is how it looks in Chrome, on Android 4.x, on iOS6 and iOS7:

This is how it looks on Android 2.3 after clicking "showMenu":

This is how I add the Menu:

initialize: function() {
    var menu = Ext.create('MenuTest.view.MenuView');

    Ext.Viewport.setMenu(menu, {
        side: 'right',
        cover:  false
    });

    this. add({
        xtype: 'button',
        text: 'showMenu',
        listeners: {
            tap: function(button, e, eOpts) {
                Ext.Viewport.toggleMenu('right');
            }
        }
    })
}

My MenuView has only a single label:

config: {
    items: [
        {
            xtype: 'label',
            html: 'Test Menu'
        }
    ]
}

Is anyone out there who got this working on Android 2.3?

Answer 1

There seems to be a bug in the setMenu method in touch-src-Default-viewport... Our fix:

// if (menu.$reveal) {  // original
   if (Ext.os.is.Android && Ext.os.version.lt('3') || menu.$reveal) {  // fixed
       Ext.getBody().insertFirst(menu.element);
       // Bugfix: inner buttons of slider overlap original container while sliding - change z-index
       Ext.get('ext-viewport').setStyle('z-index', '1');
    }

// if (menu.$reveal) {  // original
   if (Ext.os.is.Android && Ext.os.version.lt('3') || menu.$reveal) {  // fixed
       if (Ext.browser.getPreferredTranslationMethod() != 'scrollposition') {
           menu.translate(0, 0);
       }
    }

Answer 2

Here is a short snippet based on your answer which you e.g. can place into the top of your launch() function (or with the other ST fixes):

// Bugfix for Off-Canvas menu in Android 2.3
Ext.viewport.Android.override({
  showMenu: function (side) {
    if (Ext.os.version.lt('3')) {
      Ext.get('ext-viewport').setStyle('z-index', '1');
      this.getMenus()[side].$reveal = true;
    }
    this.callOverridden([side]);
  }
});