One Controller Multiple instances of NavigationView

[arandlett]

My application is using a TabPanel which each tab has a list & detail (navigation view) of different sets of data. I have one controller to control the navigation view however there seems to be a conflict with the different instances of the navigation view.

Will I need to create multiple controllers for this? Or how can the controller know what instance it is controller or is active?

[mitchellsimoens]

The architecture is totally up to you... Code reusability is great if you can

[arandlett]

Here is my problem. I am using a tab panel. Each panel is using an instance of 3 of the same views for reusability. A navigation view, list, detail. On initial load the first tab panel works great going from list to detail and back with no problem. When I go to the second tab and click on a list item it doesn't go to detail. What happens is the first tab panel is the one that changes. It shows the back button but still shows the list.

Seems like the controller doesn't know what instance of navigation view it is controlling. My goal was to have one controller that controlled the list to detail functionality that most of my tabs panels will have.

Is it that my views event thought they use same view classes need to have specified ids for each instance?

Ext.define('MonkTouch.controller.NavView',{
  extend: 'Ext.app.Controller',
  config: {
    refs:{
      main: 'navview',
      list: 'listitems',
      detail: 'itemdetail'
    },
    control: {
      main:{
        pop : 'onMainPop'
      },
      list:{
        itemtap: 'onItemTap'
      }
    }
  },
  onMainPop: function(view,item){
    var list = this.getList();
    this.getMain().push(list);
  },
  onItemTap:function(list, index, node, record){
    var detail = this.getDetail(),
        main = this.getMain();
        
    detail.setData(record.data);
    detail.config.title = record.data.title;
    main.push(detail);
  }
});

Ext.define('MonkTouch.view.NavView',{
    extend : 'Ext.navigation.View',
    xtype  : 'navview',                            
    constructor:function(config){
        
        Ext.apply(config, {
          autoDestroy:true,
          items :[
            {
              xtype : 'listitems',
              title : config.title,
              itemTpl : MonkTouch.templates.getTpl(config.contentTpl.list),
              storeName: config.storeName,
              filters: config.filters
            },
            { 
              xtype:'itemdetail',
              tpl: MonkTouch.templates.getTpl(config.contentTpl.detail)
            }
          ]
        });
        this.callParent([config]);
    }
});

[arandlett]

Instead of using xtype in items should I be using Ext.create so that a new listitems & itemdetail views are being created?

[arandlett]

I still can't find a solution for this. I noticed when on the second tab I click list item I get this js error "Uncaught TypeError: Cannot read property 'nameMap' of undefined". That seems to tell me the second 'itemdetail' didn't get created. But I am unsure.

[estesbubba]

refs work great if you have one instance that the query returns. In your case I would do something like this (untested - written off my head)

Ext.define('MonkTouch.controller.NavView',{
  extend: 'Ext.app.Controller',
  config: {
    refs:{
      tabpanel: 'tabpanel',
//      main: 'navview',
//      list: 'listitems',
//      detail: 'itemdetail'
    },
    control: {
      main:{
        pop : 'onMainPop'
      },
      list:{
        itemtap: 'onItemTap'
      }
    }
  },
  onMainPop: function(view,item){
//    var list = this.getList();
//    this.getMain().push(list);
        var activeItem = this.getTabpanel().getActiveItem(), // think should return active card
            list = activeItem.down('listitems'), // query by xtype
            main = activeItem.down('navview'); // query by xtype
            
        main.push(list);
        
  },
  onItemTap:function(list, index, node, record){
    var detail = this.getDetail(),
        main = this.getMain();
        
    detail.setData(record.data);
    detail.config.title = record.data.title;
    main.push(detail);
  }
});

[arandlett]

That worked thank you for the help! In my case the activeItem was the 'navview'. So that eliminated some code.

[arandlett]

The release notes stated if you are loading multiple items in the navigation view the last item is the active item. I added two items and the active one I want at the bottom. However there seems to be a bug. When the view becomes visible it has a back button on the initial screen.

[edspencer]

I believe the errant back button on the first screen is a separate known issue and already fixed for the next release.