How to set ui for scroller?

[eyecom]

In our app there are several rather long lists that require vertical scrolling, which is no problem with the default behaviour of an Ext.List component. But since the design the app has a black background the visibility of the default scroller isn't that great.
When inspecting the scroller I saw a class of .x-scrollbar-dark applied to it. Since there is already a class .x-scrollbar-light in the standard sencha css file, one would assume that it should be possible to set something like

ui: 'light'

on the scroller. But I can't find out how...
The API reference doesn't mention the ui property for Ext.util.Scroller. And even if it did: how can you apply it in a list context? The reference for the scroll property of Ext.List says that it accepts a scroller configuration. So I tried something like

scroll: { direction: 'vertical', momentum: false }

But this doesn't seem to have any effect. Am I missing something?
Any help greatly appreciated!

[udos86]

Hi,

as long as there is no other way to set a custom cls for scroll indicators you can achieve the same result programmatically.

var scroll = Ext.DomQuery.select(".yourClass .x-scrollbar");
Ext.fly(scroll[0]).setStyle("background-color", "rgba(240, 240, 240, 0.7)");

or shorter:

Ext.select(".yourClass .x-scrollbar").setStyle("background-color", "rgba(240, 240, 240, 0.45)");

"yourClass" is a custom CSS class of your panel which is wrapping up the scroller (could also be an id).

Works fine for me.

Bye,

Udo

[machi]

we just added the following to our custom css file

.x-scrollbar-dark {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
}

this makes the dark scroll bar appear as a light one.