Question

I’m working on Sencha touch 2. I have a tab panel inside which I have many tabs horizontally placed. I want to show the horizontal scroll bar always so that the user will know there are more tabs.
This is my tab panel with tabBar configuration. How can I make the scroll bar indicator visible always?:

Ext.define('Project.view.Result', {
extend: 'Ext.tab.Panel',
id:'searchTab',
    tabBar: {

         scrollable:'horizontal',
         scrollBar:'true',
         docked:'top',
         layout: {
                    pack: 'center',
                 },

    },
items:[
                               {  
                        title: 'A Result',
                        xtype:'AList'
                    },
                    { 
                        title: 'B Result',
                        xtype:'BList' 
                    },

                                ......
                                ......
                               { 
                        title: 'Z Result',
                        xtype:'ZList' 
                    }
                ]
        });

I tried this with css:

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

But then the scroll bar becomes visible for the list items under each tab . But not for the tab bar.

Answer 1

You nearly got it just change your css to this:

.x-tabpanel .x-scroll-indicator {
    opacity: 0.5 !important;
}

Hope it helps 🙂