Sencha Touch 2 - setActiveItem of card layout inside navigationview issue

Question

I have an Ext.Panel with a card layout nested inside a navigation view. I did this to easily switch between a map and a list without having to pop and then push a whole different view (basically to avoid the animation). So, I have a button in the navigationBar that fires an action in the controller. This initial view, with a list, load fine, but the controller code to switch between the views (using setActiveItem()) does not work. No error message. I found something about a bug where you have to call show(). Although this works, it overlays the new activeItem (the Map, in this case) on top of the navigaionBar! (see screenshot). Also, if I just change activeItem to 1 in the config of the wrapper manually, it shows the map just fine, same as the list.

My wrapper panel looks like this:

Ext.define(ViewInfos.VendorWrapper.ViewName,{
    extend: 'Ext.Panel',
    id:     ViewInfos.VendorWrapper.PanelId,
    xtype:  ViewInfos.VendorWrapper.Xtype,

    config:
    {
        layout: 'card',
        title:      Resources.VendorsNearby,
        activeItem: 0,
        items: [
            {
                xtype: ViewInfos.VendorList.Xtype, //Initially shown, a list
            },
            {
                xtype: ViewInfos.VendorMap.Xtype, //What I'm trying to show, a map
            }
        ]
    }
});

and here is my controller code:

Ext.define('OrderMapper.controller.VendorWrapper', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
           vendorMap:           ViewInfos.VendorMap.Xtype,
           vendorList:          ViewInfos.VendorList.Xtype,
           vendorWrapper:       ViewInfos.VendorWrapper.Xtype,
           main:                ViewInfos.Main.Xtype,
           vendorToggleButton: (ViewInfos.Main.Xtype + ' button[action=vendorViewToggle]')
        },
        control: {
            vendorToggleButton:{
                tap: function(){
                    var curView = this.getVendorWrapper().getActiveItem().id;

                    //active view == VendorList
                    if(curView == 'VendorList'){

                        //this shows up in the console
                        console.log('vendorToggleButton tapped, switching to map');

                        this.getVendorWrapper().setActiveItem(1);

                        //without this line, the view doesn't even change
                        this.getVendorWrapper().show();
                        this.getVendorToggleButton().setText('List');
                    }

                    //active view == VendorMap
                    else if (curView == 'VendorMap'){
                        console.log('vendorToggleButton tapped, switching to list');
                        this.getVendorWrapper().setActiveItem(0);
                        this.getVendorToggleButton().setText('Map');

                    }
                }
            }
        }
    }

And here is the screenshot of the wonky view that happens on this.getVendorWrapper().show()

Also, I tried changing the wrapper to a Carousel (instead of a regular panel with a card layout), and the carousel will swipe to change list/map but setActiveItem() STILL doesn't work.

Answer 1

I'm currently working on a navigation.View where there is basically 4 main views from where you can push other subview. I did it like this :

Ext.define('App.view.Navigation', {
  requires: [
    ...
  ],

  xtype: 'mainviews',

  extend: 'Ext.navigation.View',

  config: {
    cls: 'content',
    layout:{animation:false}, // or whatever animation you want for push and pop
    navigationBar: {
      ...
    },
    items: [{
      xtype: 'container',
      layout:'card',
      items: [{
        xtype: 'mainview1',
      },{
        xtype: 'mainview2',
      },{
        xtype: 'mainview3',
      },{
        xtype: 'mainview4',
      }]
    }]
  }
});

Then it's really easy to either set the active item of the navigation view or push subviews

For instance, in a controller it would be

this.getMainviews().setActiveItem(X); // X = 0,1,2 or 3

and

this.getMainviews.push(view); // view = the view your want to push

and these is the references :

refs:{
  mainviews: 'mainviews'
}

Hope this helps

Answer 2

First of all, if you just want to avoid the animation on push/pop, add this config to your navigation view:

layout: {
    animation: null
}

Generally, you should not call .show() on items that are inside your Ext.navigation.View instance. They will be added to Ext.Viewport directly, thus appearing to be on top of the navigation bar.

Have a look at this JSFiddle example, might give you a hint.