Load data when needed

[arandlett]

I have a app that has a tabpanel. Each tab panel has a navview. Each navview has a list. When the app initially loads each of the lists in each panel load the store data from remote urls. This causes the app to load very slowly.

To prevent slower loading what would be a better way to accomplish this?

[mitchellsimoens]

I would start by only rendering one navview. Then when you switch tabs, render the other and unrender the first.

[arandlett]

Each of my tab items has an xtype which is the navview. Would I leave the xtype blank or use a generic one. Then listen for activeitemchange on the tabpanel to load the add the navview that way?

[arandlett]

Within the tabpanel controller should I listen for activeitemchange and use Ext.create('navview') to facilitate this?

[arandlett]

As I thought I just listened for "activeitemchange" and "show" on initial load. When those fired I get the active item of the tab panel and used the setItems method for the active item. Instead of unloading previous views in hidden tabpanel upon "activeitemchange" I checked to see if navigation view was still on stage. This way the store for the list inside the navigation view did not have to reload.

Ext.define('MyApp.controller.Viewport',{
  extend: 'Ext.app.Controller',
  config: {
    refs:{
      tabpanel:'tabpanel'
    },
    control: {
      tabpanel:{
        activeitemchange:'onTabChange',
        show:'tabPanelShow'
      }
    }
  },
  tabPanelShow:function(tp){
    var main = this.getTabpanel().getActiveItem();
      main.setItems([{
    	 xtype:'navigationview'
      }]); 
  },
  onTabChange:function(a,b,c){
	var main = b,
        prevmain = c;
      if(main.innerItems.length === 0){
        main.setItems([{
      	  xtype:'navigationview'
        }]);
      } 
  }
});