TabPanel setActiveItem

[St4tik]

Sencha Touch version tested:

• 1.1.0

• only default ext-all.css

Platform tested against:

• iOS 4
• Android 2.3.3

Description:

• My apps works like this (The structure of the app may seem unrelevant but this is a simplified version to illustrate my problem, the real app is much more complex and needs this structure) :
  
  I have a main panel with a card layout. In this panel i have two others components :
  > A menu panel with 4 buttons
  > A TabPanel with 4 tabs
  
  If you press a button of the menu it leads you to one of the tabs of the TabPanel component.
  In each tab i have a back button that leads back to the menu.
  
  I encountered 2 problems :

• First problem : when i click on one of the menu button, i need to set "active" 2 things :
  1) the tab of the TabPanel component
  2) the TabPanel itself
  for both i use their respective setActiveItem method :
  
  

  var menuHandler1 = function(button, event) {
      myApp.views.tabPanel.setActiveItem('pan1');
      myApp.views.mainCard.setActiveItem('tabPanel',{ type: 'slide', direction: 'left'});
  };

  The problem is that there is a "delay" : i can see the default tab before it changes to the wished tab.
  I have tried to use the after function in the animation but the problem remains.
  
  Second problem :When i hit the back button : sometimes, when i'm in a tab and i click on the back button, the content of the tab dissapear and then the slide animation appends.

Test Case:

> MainPanel.js (with the card layout) :

    
myApp.views.mainCard = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardAnimation: 'slide',
    initComponent: function() {
        /* Instances are attributed to namespaces */
        Ext.apply(myApp.views, {
            menu: new myApp.views.menu(),
            tabPanel: new myApp.views.tabPanel(),
            
        });
        /* Instances are put into this panel */
        Ext.apply(this, {
            items: [
              myApp.views.menu,
              myApp.views.tabPanel
            ]
        });
        myApp.views.mainCard.superclass.initComponent.apply(this, arguments);
    }  
});

> Menupanel.js :

    
var menuHandler1 = function(button, event) {
    myApp.views.tabPanel.setActiveItem('pan1');
    myApp.views.mainCard.setActiveItem('tabPanel',{ type: 'slide', direction: 'left'});
};

var menuHandler2 = function(button, event) {
    myApp.views.tabPanel.setActiveItem('pan2');
    myApp.views.mainCard.setActiveItem('tabPanel',{ type: 'slide', direction: 'left'});
};

var menuHandler3 = function(button, event) {
    myApp.views.tabPanel.setActiveItem('pan3');
    myApp.views.mainCard.setActiveItem('tabPanel',{ type: 'slide', direction: 'left'});
};

var menuHandler4 = function(button, event) {
    myApp.views.tabPanel.setActiveItem('pan4');
    myApp.views.mainCard.setActiveItem('tabPanel',{ type: 'slide', direction: 'left'});
};

myApp.views.menu = Ext.extend (Ext.Panel,{
    fullscreen:true,
    id:'menu',
    items: [
        {xtype:'button',text:'test1',handler:menuHandler1},
        {xtype:'button',text:'test2',handler:menuHandler2},
        {xtype:'button',text:'test3',handler:menuHandler3},
        {xtype:'button',text:'test4',handler:menuHandler4}
    ]
});

> TabPanel.js :

  
var BackToolbar = Ext.extend(Ext.Toolbar,{
    constructor : function(config) {
        config = Ext.apply({
            cls: 'backToolbar',
            title : config.title,
            dock: 'top',
            items: [
                {
                    ui: 'dark',
                    iconCls: 'back',
                    iconMask: true,
                    iconAlign:'top',
                    handler: function () {    
                        myApp.views.mainCard.setActiveItem('menu',{ type: 'slide', direction: 'right'});
                    }
                }
            ]
        }, config); 
        BackToolbar.superclass.constructor.call(this, config);
    }
});

myApp.views.tabPanel = Ext.extend(Ext.TabPanel, {
    id:'tabPanel',
    tabBar: {
        dock: 'bottom',
    },
    fullscreen: true,
    items: [
    {
        id:'pan1',
        html: '1 panel 1 tevz gzrg rzgz gzr gzrg zrg zrgzrgzg zrgzr gzr gzrg ',
        iconCls: 'settings',
    }
    , {
        id:'pan2',
        html: '2',
        iconCls: 'settings',
    }, {
        id:'pan3',
        html: '3',
        iconCls: 'settings',
    }, {
        id:'pan4',
        html: '4',
        iconCls: 'settings',
    }],

    dockedItems: new BackToolbar({title: 'titre'})
    
});

Steps to reprocude the problem

The problem is visible in Chrome browser too

> For the first problem : simply execute the code and try to click on a button (2,3 or 4) of the menu. You will briefly see the default tab before the whised one.

> For the second problem : click button 2 of the menu, then back, then button 3, then back, then button 4, then back, then 1, ... Sometimes you will se the content of the tab dissapear before sliding back to the menu.

The result that was expected:

> Instant load of the right tab when using setActiveItem method of the TabPanel and not seeing the default tab
> No dissapearing of the tab content before sliding animation when hitting back button

The result that occurs instead:

described just before

Debugging already done:

None

Possible fix:

No fix found

[mbalsam]

First thing I'd recommend is to set the id when you instantiate the TabPanel not for the class. Also, why do you extend Ext.TabPanel

Ext.extend(Ext.TabPanel, config)

when you neither extend initComponent nor add any other functionality to the class? Just instatntiate your tab panel this way:

myApp.views.tabPanel = new Ext.TabPanel(config)

Regarding your actual problem: TabPanel by default has cardSwitchAnimation set to 'slide'. Both your setActiveItem calls do have an animation which is shown. Try:

myApp.views.tabPanel.setActiveItem(item, false)

to surpress the animation.

[St4tik]

Hi mbalsam !

Thank you a lot ! You solved my two problems with this line of code. Now it works perfectly

[mbalsam]

You're welcome. I'm glad I could help.

This thread should be moved to discussion/help as it is not really a bug.