1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
    dmregister is on a distinguished road

      0  

    Default Answered: Dynamically Updating Tabbar Error

    Answered: Dynamically Updating Tabbar Error


    My app will a have 2 different view: logged out and logged in.

    I update the tabbar depending on the scenerio but I get an error after I update the tabbar:
    "Uncaught TypeError: Cannot call method 'removeCls' of null"

    I am assuming I am getting the error because I remove all items and there is not a "active" class to remove. When I call setActiveItem(0) I get the above error.

    My Code:
    Code:
    updateTabs: function(){
          this.deleteTabs();
          this.addTabs();
          
          this.getTabs().setActiveItem(0);
      },
      addTabs:function(){
          this.getTabs().add([
          {
              xtype: 'tab1View',
              title: 'tab1',
              iconCls: 'home'
          },{
              xtype: 'tab2View',
              title: 'tab 2',
              iconCls: 'home'
          },{
              xtype: 'tab3View',
              title: 'tab 3',
              iconCls: 'home'
          },{
              xtype: 'tab4View',
              title: 'tab 4',
              iconCls: 'home'
          }
          ]);
    
    
      },
      deleteTabs:function(){
          this.getTabs().removeAll(true);
      }
    I should mention that it is called with:
    Code:
    this.getApplication().getController('Controllers.tabsController').updateTabs();
    Tab 1 does activate, but the view does not load, it only highlights the tab. Once you click tab 2, everything starts working as expected.


    any help would be greatly appreciated.
    Last edited by dmregister; 16 May 2012 at 2:27 PM. Reason: forgot information

  2. Crisis Averted.

    Just created an alternate Viewport file for each state and switch to the new one and destroy the old one.

    Code:
    updateViewport: function(){
          
          Ext.Viewport.add(Ext.create("Views.ViewportProfile"));
          Ext.Viewport.setActiveItem(1);
          Ext.Viewport.removeAt(0);
      },
      resetViewport:function(){
          
          Ext.Viewport.add(Ext.create("Views.Viewport"));
          Ext.Viewport.setActiveItem(1);
          Ext.Viewport.removeAt(0);
      }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    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'm assuming getTabs returns the tab panel?
    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.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
    dmregister is on a distinguished road

      0  

    Default


    Correct. It is a ref in my controller for the tabbar ID.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    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


    Sounds like it is trying to animate to or from an item that is destroyed.
    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.

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
    dmregister is on a distinguished road

      0  

    Default


    Any suggestions?

    When I console log the tabbar, the _activeItem is still set the previous tab, which is no longer an item inside the tabbar. I am positive that is causing the error, just not sure how to fake it. Should I hide the items first then destroy? I haven't looked at the sencha source to see how it handles hide.

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Answers
    1
    Vote Rating
    0
    dmregister is on a distinguished road

      0  

    Default


    Crisis Averted.

    Just created an alternate Viewport file for each state and switch to the new one and destroy the old one.

    Code:
    updateViewport: function(){
          
          Ext.Viewport.add(Ext.create("Views.ViewportProfile"));
          Ext.Viewport.setActiveItem(1);
          Ext.Viewport.removeAt(0);
      },
      resetViewport:function(){
          
          Ext.Viewport.add(Ext.create("Views.Viewport"));
          Ext.Viewport.setActiveItem(1);
          Ext.Viewport.removeAt(0);
      }

Thread Participants: 1

Tags for this Thread