2012-12-20 3 views
3

Я работаю над Sencha touch 2. У меня есть панель вкладок, внутри которой у меня много вкладок по горизонтали. Я хочу показать горизонтальную полосу прокрутки всегда так, чтобы пользователь знал, что есть больше вкладок. Это моя панель вкладок с настройкой tabBar. Как я могу сделать индикатор полосы прокрутки видимого всегда ?:Видимость индикатора полосы прокрутки в sencha touch 2

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' 
        } 
       ] 
     }); 

Я попытался это с помощью CSS:

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

Но тогда полоса прокрутки становится видимой для элементов списка по каждой вкладке. Но не для панели вкладок.

ответ

8

Вы почти получили это просто изменить CSS к этому:

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

Надеются, что это помогает :)

+0

Спасибо. Это сработало :) – Akshatha

+0

Это хорошее решение (работало в Chrome), но полосы прокрутки все еще не отображаются в Android WebView (Jellybean 4.2). Я думаю, это потому, что поддержка CSS для WebView в целом довольно бедна. Однако, если вы нажмете и прокрутите список, тогда появится полоса прокрутки (довольно уродливая, хотя). Просто для тех, кто интересуется. –

1

«Новое в Touch, 2.3.0, каждый индикатор имеет конфигурацию AutoHide, что позволяет вы можете управлять им. Установка autoHide на false укажет, что индикатор не будет автоматически скрываться. Вы можете использовать конфигурацию индикаторов в пределах прокручиваемой конфигурации в контейнере или подклассе. "

http://www.sencha.com/blog/top-support-tips-march-2014

Ext.application({ 
    name: 'Fiddle', 

    launch : function() { 
     Ext.Viewport.add({ 
      xtype: 'container', 
      html: 'The y scroll indicator will always show, x will hide as autoHide defaults to true', 
      scrollable: { 
       direction: 'both', 
       indicators: { 
        y: { 
         autoHide: false 
        } 
       } 
      } 
     }); 
    } 
}); 

https://fiddle.sencha.com/#fiddle/1u9

Смежные вопросы