1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Vote Rating
    0
    jeanrene is on a distinguished road

      0  

    Question Problem with TabBar when scrolling

    Problem with TabBar when scrolling


    Hi,

    I have a problem with the TabBar when I'm scrolling. I'm able to scroll but a click is also interpreted. So that when I'm scrolling the panel is changing because there is a click on a button of the TabBar.

    This is my code :

    Code:
    var myTabBarPanel = new Ext.TabPanel({
    	id: 'tabbarpanel',
    	dock: 'bottom',
    	tabBar: {
    		id: 'tabbar',
    		dock: 'bottom',
    		ui: 'light',
    		layout: {
    		        pack: 'center'
    		},
    		listeners: {
    			change: index.myObservableSingleton.tabBarHandler 
    		},
    		scroll: {
    			direction: 'horizontal',
    			useIndicators: false
    		}
    	},
    	items: [buttonsTabBar]
    });
    Code:
    tabBarHandler: function(pTabbar, pTab, pEvent) {
    	Ext.getCmp('rootpanel').doLayout();
    	Ext.getCmp('mytoolbar').doLayout();
    	
    	if(pTab.getText() == 'Home') {
    		index.myObservableSingleton.switch_accueil();
    	} else if(pTab.getText() == 'Filters') {
    		index.myObservableSingleton.switch_filter();
    	} else if(pTab.getText() == 'Show') {
    		index.myObservableSingleton.switch_shox(); 
    	} else if(pTab.getText() == 'Next') {
    		index.myObservableSingleton.switch_next();
    	} else if(pTab.getText() == 'Help') {
    		index.myObservableSingleton.switch_help();
    	} else if(pTab.getText() == 'Configuration') {
    		index.myObservableSingleton.switch_config();
    	}
    }
    Thanks

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    j4yc33 is on a distinguished road

      0  

    Exclamation


    Same prob here, need help fast.

    thx in advance

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

      0  

    Default


    I also have the same problem:

    Code:
    var tabPanel = new Ext.TabPanel({
                tabBar: {
                    dock: 'bottom',
    		scroll: 'horizontal',
                    layout: {
                        pack: 'center'
                    }
                }
    //.....
    });
    when you scroll the tab buttons, they also activate. can you somehow disable this?

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

      0  

    Default


    bump ... anyone?

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Vote Rating
    0
    jeanrene is on a distinguished road

      0  

    Question


    nobody has any idea ???

    Is there someone who has ever created a TabBar with an horizontal scroll ?

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Vote Rating
    0
    jeanrene is on a distinguished road

      0  

    Default


    Is there an expert who know this problem?

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Vote Rating
    0
    jeanrene is on a distinguished road

      0  

    Lightbulb


    This link can help you (it's working well) :

    http://www.sencha.com/forum/showthre...t-onTouchStart

    But is there an easier way ?

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    LMKurt is on a distinguished road

      0  

    Default


    Has anyone figured this out yet?

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    kartikrao is on a distinguished road

      0  

    Default Increase spacing between tabs

    Increase spacing between tabs


    I know this thread has been inactive for quite sometime, but I thought i'd throw in my 2 cents anyways.

    Have you tried increasing the spacing between tabs using css? This provides blank spaces between tabs that the user can use to scroll.

    In your css file, add this rule:
    Code:
    .x-tab{ margin-right:20px !important;} /* you may change the value to anything you feel fit */
    I tried creating spacers (blank items with xtype:'spacer') in the tabBar, but that didn't work well. So i feel increasing the spacing between tabs is the best way to go.

    Cheers,
    Kartik Rao