title: Routing Extjs deeper navigation
body: <p>I'm writing a Extjs app in the 6.2.0 version, I’ve got a routing situation.
  My problem is when we enter on the NavigateDeep if I enter the Url ok it catches but it doesn’t render.
  I define the routes on the main Controller like:</p>
  
  <pre><code>Ext.define('App.view.main.MainController', {
      extend: 'Ext.app.ViewController',
      alias: 'controller.main',
      listen : {
          controller : {
              '*' : {
                  unmatchedroute : 'onRouteChange1',
                  changeroute: 'changeRoute'
              }
          }
      },
  
      routes: {
          ':node': 'onNavigate',
          ':node/:id' : 'onNavigateDeep',
          ':node/:id/:tabid' : 'onNavigateDeepTab'
      },
  
      lastView: null,
      onRouteChange1: function(){
          console.log("hier unmatched route");
      },
      setCurrentView: function(hashTag) {
          hashTag = (hashTag || '').toLowerCase();
          console.log("hash:" + hashTag);
          var me = this,
              refs = me.getReferences(),
              mainCard = refs.mainCardPanel,
              mainLayout = mainCard.getLayout(),
              navigationList = refs.navigationTreeList,
              store = navigationList.getStore(),
              node = store.findNode('routeId', hashTag) ||
                  store.findNode('viewType', hashTag),
              view = (node &amp;&amp; node.get('viewType')) || 'page404',
              lastView = me.lastView,
              existingItem = mainCard.child('component[routeId=' + hashTag + ']'),
              newView;
  
          // Kill any previously routed window
          if (lastView &amp;&amp; lastView.isWindow) {
              lastView.destroy();
          }
          lastView = mainLayout.getActiveItem();
  
          if (!existingItem) {
              newView = Ext.create({
                  xtype: view,
                  routeId: hashTag,  // for existingItem search later
                  hideMode: 'offsets'
              });
          }
  
          if (!newView || !newView.isWindow) {
              // !newView means we have an existing view, but if the newView isWindow
              // we don't add it to the card layout.
              if (existingItem) {
                  // We don't have a newView, so activate the existing view.
                  if (existingItem !== lastView) {
                      mainLayout.setActiveItem(existingItem);
                  }
                  newView = existingItem;
              }
              else {
                  // newView is set (did not exist already), so add it and make it the
                  // activeItem.
                  Ext.suspendLayouts();
                  mainLayout.setActiveItem(mainCard.add(newView));
                  Ext.resumeLayouts(true);
              }
          }
  
          navigationList.setSelection(node);
  
          if (newView.isFocusable(true)) {
              newView.focus();
          }
  
          me.lastView = newView;
      },
  
      onNavigationTreeSelectionChange: function (tree, node) {
          var to = node &amp;&amp; (node.get('routeId') || node.get('viewType'));
  
          if (to) {
              console.log("to;:" + to);
              this.redirectTo(to);
          }
      },
  
      onToggleNavigationSize: function () {
          var me = this,
              refs = me.getReferences(),
              navigationList = refs.navigationTreeList,
              wrapContainer = refs.mainContainerWrap,
              collapsing = !navigationList.getMicro(),
              new_width = collapsing ? 64 : 250;
  
          if (Ext.isIE9m || !Ext.os.is.Desktop) {
              Ext.suspendLayouts();
  
              refs.logo.setWidth(new_width);
  
              navigationList.setWidth(new_width);
              navigationList.setMicro(collapsing);
  
              Ext.resumeLayouts(); // do not flush the layout here...
  
              // No animation for IE9 or lower...
              wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
              wrapContainer.updateLayout();  // ... since this will flush them
          }
          else {
              if (!collapsing) {
                  // If we are leaving micro mode (expanding), we do that first so that the
                  // text of the items in the navlist will be revealed by the animation.
                  navigationList.setMicro(false);
              }
  
              // Start this layout first since it does not require a layout
              refs.logo.animate({dynamic: true, to: {width: new_width}});
  
              // Directly adjust the width config and then run the main wrap container layout
              // as the root layout (it and its chidren). This will cause the adjusted size to
              // be flushed to the element and animate to that new size.
              navigationList.width = new_width;
              wrapContainer.updateLayout({isRoot: true});
              navigationList.el.addCls('nav-tree-animating');
  
              // We need to switch to micro mode on the navlist *after* the animation (this
              // allows the "sweep" to leave the item text in place until it is no longer
              // visible.
              if (collapsing) {
                  navigationList.on({
                      afterlayoutanimation: function () {
                          navigationList.setMicro(true);
                          navigationList.el.removeCls('nav-tree-animating');
                      },
                      single: true
                  });
              }
          }
      },
  
      onMainViewRender:function() {
          if (!window.location.hash) {
              this.redirectTo("dashboard");
          }
      },
      changeRoute: function(controller,route){
          this.redirectTo(route,true);
          console.log("change route fired");
      },
      onClickLogoutButton: function () {
          // Remove the localStorage key/value
          localStorage.removeItem('LoggedIn');
  
          // Remove Main View
          this.getView().destroy();
  
          // Add the Login Window
          Ext.create({
              xtype: 'login'
          });
      },
      onClickShareButton: function(){
          var text = window.location;
          window.prompt("Copy to clipboard:", text);
      },
  
  
      onNavigate:function(node){
          console.log("on route change");
          this.setCurrentView(node);
      },
      onNavigateDeep: function (node, id) {
          console.log("Tab");
          console.log(node + '/' + id);
          var route = node+'/'+id;
          this.setCurrentView(route);
  
      },
      onNavigateDeepTab: function (node, id, tabid) {
          console.log("navigate Tab");
  
      }
  
  });
  </code></pre>
  
  <p>My main view is:</p>
  
  <pre><code>Ext.define('App.view.main.Main', {
      extend: 'Ext.container.Viewport',
  
      xtype: 'app-main',
  
      requires: [
          'App.view.Dashboard',
          'App.view.immo.List',
          'App.view.settings.Settings',
          'App.view.news.News',
          'App.view.help.Help'
      ],
  
      controller: 'main',
      viewModel: 'main',
  
      cls: 'sencha-dash-viewport',
      itemId: 'mainView',
  
      layout: {
          type: 'vbox',
          align: 'stretch'
      },
  
      listeners: {
          render: 'onMainViewRender'
      },
  
      items: [{
              xtype: 'toolbar',
              cls: 'dash-dash-headerbar shadow',
              height: 64,
              itemId: 'headerBar',
              items: [{
                  xtype: 'component',
                  reference: 'logo',
                  cls: 'logo',
                  html: '&lt;div class="main-logo"&gt;&lt;img src="resources/images/logo.png"&gt;App&lt;/div&gt;',
                  width: 250
              }, {
                  margin: '0 0 0 8',
                  ui: 'header',
                  iconCls:'x-fa fa-navicon',
                  id: 'main-navigation-btn',
                  handler: 'onToggleNavigationSize',
                  tooltip: 'Navigation umschalten'
              },
              '-&gt;',
               {
                   xtype: 'button',
                   ui: 'header',
                   iconCls: 'x-fa fa-share-alt',
                   handler: 'onClickShareButton',
                   tooltip: 'Share'
               },
              {
                  iconCls:'x-fa fa-question',
                  ui: 'header',
                  href: '#help',
                  hrefTarget: '_self',
                  tooltip: 'Hilfe'
              }, {
                  iconCls:'x-fa fa-th-large',
                  ui: 'header',
                  href: '#Dashboard',
                  hrefTarget: '_self',
                  tooltip: 'Zum Dashboard'
              }, {
                  xtype: 'button',
                  ui: 'header',
                  iconCls: 'x-fa fa-power-off',
                  handler: 'onClickLogoutButton',
                  tooltip: 'Logout'
              }]
      }, {
              xtype: 'maincontainerwrap',
              id: 'main-view-detail-wrap',
              reference: 'mainContainerWrap',
              flex: 1,
              items: [{
                  xtype: 'treelist',
                  reference: 'navigationTreeList',
                  itemId: 'navigationTreeList',
                  ui: 'navigation',
                  store: 'NavigationTree',
                  width: 250,
                  expanderFirst: false,
                  expanderOnly: false,
                  listeners: {
                      selectionchange: 'onNavigationTreeSelectionChange'
                  }
              }, {
                  xtype: 'container',
                  flex: 1,
                  reference: 'mainCardPanel',
                  cls: 'sencha-dash-right-main-container',
                  itemId: 'contentPanel',
                  layout: {
                      type: 'card',
                      anchor: '100%'
                  }
              }]
          }]
  });
  </code></pre>
  
  <p>When we click on the tree I change the container but one of them has the route if the :id where I have a Tab: </p>
  
  <pre><code>Ext.define('App.view.settings.Settings',{
      extend: 'Ext.tab.Panel',
      xtype: 'settings',
      itemId:'settings',
      requires: [
          'App.view.settings.SettingsController',
          'App.view.settings.SettingsModel',
          'App.view.settings.property.Property',
          'App.view.settings.user.User'
      ],
  
      controller: 'settings-settings',
      viewModel: {
          type: 'settings-settings'
      },
      reference: 'tab',
      tabPosition: 'left',
  
      tabBar:{
          flex: 1,
          tabRotation: 0,
          tabStretchMax: true,
          cls: 'immoNavi'
      },
      layout: 'Container',
  
      defaults: {
          padding: 0,
          textAlign: 'left'
      },
      listeners: {
          tabchange: 'onTabChange'
      },
  
      items: [{
          xtype: 'component',
          tabConfig:{
              hidden: true
          }
      },{
          title: 'Property',
          itemId: 'property',
          xtype: 'property',
          cls: 'container'
      },{
          title: 'User',
          itemId: 'user',
          xtype: 'user'
      }]
  });
  </code></pre>
  
  <p>I went through the documentation but didn't find any tip that might help me with it. What am I missing here?  Should I take care the rendering on the tab controller? Or How? 
  Thanks in advance for the help </p>