1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default Load data when needed

    Load data when needed


    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would start by only rendering one navview. Then when you switch tabs, render the other and unrender the first.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default Use activeitemchange?

    Use activeitemchange?


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

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Talking Took me a while but I figured it out.

    Took me a while but I figured it out.


    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.
    Code:
    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'
            }]);
          } 
      }
    });

Thread Participants: 1

Tags for this Thread