Search code examples
androidextjsmenusencha-touch-2android-2.3-gingerbread

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

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:

enter image description here enter image description here

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

enter image description here

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?

Solution

  • 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);
       }
    }