PDA

View Full Version : ToolBar and scrolling, is it possible to hide the scroll bar?



anothermarcus
6 Jan 2011, 4:35 PM
Hi all,

I'm really loving Sencha Touch so far. I'm trying to piece together a prototype to see if this tool can satisfy our requirements. If it can, then we'll probably tied into it for the life of the product.

My goal is to try to get as close to a native look and feel as possible.

If I have a toolbar with buttons defined as such, the number of buttons exceed the width of the screen, so I want to allow scrolling with

scroll: 'horizontal'

But is there an option to hide the actual scroll bar that appears when I scroll those buttons left to right? :-?




toolbar = new Ext.Toolbar({
dock: 'top',
xtype: 'toolbar',
ui : 'light',
scroll: 'horizontal',
defaults: {
iconMask: true
},
items : [
myButtonGroup
]
});

Here is a perfect example.. try this in a Safari Browser Minimized, on a iTouch phone.. and scroll left and right.. you'll see the little horizontal scroll bar:

http://dev.sencha.com/deploy/touch/examples/icons/

Is it possible to hide the scroll bar?


Thanks!
-Mark

knutedga
27 Jan 2011, 1:10 AM
Hidden on init


toolbar = new Ext.Toolbar({
dock: 'top',
xtype: 'toolbar',
ui : 'light',
scroll: 'horizontal',
hidden: true,
defaults: {
iconMask: true
},
items : [
myButtonGroup
]
});


or hide and show runtime


toolbar.hide();
toolbar.show();

adekivet
30 May 2013, 1:53 AM
In Sencha Touch 2.2 you can do it like this:

tabBar: { docked: 'bottom',
id: 'myTabBar',
itemId: 'myTabBar',
scrollable: {
direction: 'horizontal',
indicators: false
}
}

iamvua
8 Jun 2013, 7:41 AM
In Sencha Touch 2.2 you can do it like this:

tabBar: { docked: 'bottom',
id: 'myTabBar',
itemId: 'myTabBar',
scrollable: {
direction: 'horizontal',
indicators: false
}
}

wow, thank!!!