Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    St4tik is on a distinguished road

      0  

    Default TabPanel setActiveItem

    TabPanel setActiveItem


    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 :

      Code:
      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) :

    Code:
        
    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 :

    Code:
        
    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 :

    Code:
      
    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

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    52
    Vote Rating
    0
    mbalsam will become famous soon enough

      0  

    Default


    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

    Code:
    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:

    Code:
    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:

    Code:
    myApp.views.tabPanel.setActiveItem(item, false)
    to surpress the animation.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
    St4tik is on a distinguished road

      0  

    Default


    Hi mbalsam !

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

  4. #4
    Sencha User
    Join Date
    May 2011
    Posts
    52
    Vote Rating
    0
    mbalsam will become famous soon enough

      0  

    Default


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

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

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi