PDA

View Full Version : Horizontally scrollable bottom tabs



meyerovb
27 Jun 2010, 10:26 PM
I slightly modified the kitchen sink demo by appending a bunch of cards so I'd have enough to go off the screen, and then adding a property to the TabPanel, scroll: 'horizontal'

According to the documentation (http://www.sencha.com/deploy/touch/docs/?class=Ext.TabPanel) it was my understanding this would allow me to scroll the tabs if they overflowed off the viewable area. However this is not the case (btw, sortable worked perfectly). How do I implement scrolling tabs in the bottom tabs example after I add additional tabs to it?

Also, there is the following property in the tabpanel:
defaults: {
scroll: 'vertical',
},
What's with the extra comma, and what is this property meant to do on this page?

TommyMaintz
28 Jun 2010, 12:44 PM
Try to use this in the tabpanel config



tabBar: {
scroll: 'horizontal'
}

meyerovb
28 Jun 2010, 1:34 PM
Worked, thanks. Anyone up for answering part 2?

There is the following property in the tabpanel of the kitchensink bottomtabs example:
defaults: {
scroll: 'vertical',
},
What's with the extra comma, and what is this property meant to do on this page?

TommyMaintz
28 Jun 2010, 1:47 PM
The extra comma is a mistake. The defaults configuration option allows you to set defaults for each item inside that container. In this case we make each item inside the tabpanel vertically scrollable.

meyerovb
28 Jun 2010, 1:56 PM
Thanks for the help, first day with extjs/sencha (been off in jquery land), for some reason I thought defaults applied to the buttons themselves rather than the display area... I was wondering how vertically scrollable buttons would work, lol!