Sencha Touch - TabBar의 마지막 탭으로 스크롤

Question

내 앱에 여러 개의 탭이있는보기가 있습니다. 나는 마지막 것에 초점을 맞추고 싶다. 활성 탭 this.setActiveItem(10)을 설정할 수 있지만 마지막 항목까지 (프로그래밍 방식으로) 탭바를 스크롤 할 수는 없습니다. 10 번째 탭의 콘텐츠가 표시되지만 탭바의 10 번째 항목이 숨겨져있어 혼란 스러울 수 있습니다.

미리 감사드립니다.

Answer 1

정말 좋은 질문이며 많은 사람들이 유용 할 수 있습니다.

먼저 tabBar의 인스턴스가 필요하므로 activeTab은 의 tabPanel입니다. 그런 다음 탭 항목의 오프셋을 쉽게 얻을 수 있습니다. 여기에서 탭 항목이란 탭의 내용을 담고있는 컨테이너가 아니라 상단 또는 하단에 위치 할 수있는 탭 표시기를 의미합니다. 따라서 오프셋이 이고 활성 탭 항목은 tabBar이고 컨테이너가 아닙니다.

this.getMyTabPanel().setActiveItem(6); 

    var tabBar = this.getMyTabPanel().getTabBar(); 

    var activeTab = tabBar.getActiveTab(); 
    var x= activeTab.element.getX(); 
    var y = activeTab.element.getY(); 

다음 부분은 tabBar scroller입니다. 일단 우리가 이것을 얻으면 우리는 그것을 실용적으로 스크롤하여 위의 단계에서 얻은 원하는 위치에 놓을 수 있습니다.

var scroller = this.getMyTabPanel().getTabBar().getScrollable().getScroller(); 

    scroller.scrollTo(x,y); 

작업 demo is here

---

실용적으로 스크롤하는 동안 당신은 또한을 애니메이션을 활성화 할 수 있습니다

업데이트 -

scroller.scrollTo(x, y, true);