Results 1 to 9 of 9

Thread: Problem with TabBar when scrolling

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Vote Rating
    0
      0  

    Question 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
      0  

    Exclamation

    Same prob here, need help fast.

    thx in advance

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
      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
      0  

    Default

    bump ... anyone?

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    France
    Posts
    25
    Vote Rating
    0
      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
      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
      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
      0  

    Default

    Has anyone figured this out yet?

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default 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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •