View Full Version : Making List Scroll Idicators show permanently

9 Sep 2011, 6:06 AM
Hello...my first post here.

We have several panels with lists that are a little bit longer and some users that are not used to mobile devices. Is there any possibility to make the scroll indicators sticky so they donīt vanish ?

The scoll configuraiton of the Panel:

scroll : {
direction : 'vertical',
useIndicators : 'vertical'

I tried to change this via css:

.x-scrollbar-dark {
.x-list .x-scrollbar-vertical {

Which is better in a way that the scrollbars appear instantly, but their correct height ist only calculated on the first "dragstart" event which calls a method in Ext.util.ScrollView - which i canīt seem to reach from the scroller object of my panel.

How can i show the indicators from the beginning and make them stick to the UI ?

15 Sep 2011, 12:52 AM
No Idea? I was hoping for Animal to shred my self respect in less than 10 seconds - just joking ;)

15 Sep 2011, 2:14 AM
Hey mmJoe.
I don't like what you want to do, but this is your choose ;).
Probably the easier way to do that is override the Ext.util.Scroller.Indicator component to prevent from hiding himself.
I write you a simple example that show you how to do that and how it works with a simple scrollable panel:

Ext.regApplication('Sample,', {

launch: function() {

Ext.override(Ext.util.Scroller.Indicator, {
hide: function() {
var me = this;
if (this.hideTimer) {
return this;

var pnl = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
html: 'My Panel'



Hope this helps.

10 Apr 2012, 8:30 PM
For anyone trying to make the scrollbars permanent on Sencha Touch 2.0, here is the solution that worked for me:

Ext.override(Ext.scroll.indicator.CssTransform, {hide: function() {return false;},initialize:function(){this.show();}});
Ext.override(Ext.scroll.indicator.Default, {hide: function() {return false;},initialize:function(){this.show();}});
Ext.override(Ext.scroll.indicator.ScrollPosition, {hide: function() {return false;},initialize:function(){this.show();}});

27 Nov 2012, 4:29 AM
If you don't want permanent scroll indicators in all the components of your app, you can apply it to certain instances by doing one of the following:

1. with a neat css trick:

#myList .x-scroll-indicator[style] {
opacity: 0.5 !important;

Where "myList" is the id of my Exd.dataview.List (it can be any other component).

2. The above didn't work on the ipad mini for example, so you can also try this (this only does it for the y component):

var indicator = Ext.getCmp('myList').getScrollable().getIndicators().y;

if ( indicator ) {

// set it to show initially
indicator.element.setStyle('opacity', 0.5);

// or
// Ext.get('myList').down('div.x-scroll-indicator').dom.style['opacity'] = 0.5;

// never hide it:
indicator.hide = function() {
var me = this;
if (this.hideTimer) {
return this;