Sencha Touch - scroll to last tab on TabBar

问题:

There is a view with many tabs in my App. I'd like to set focus on the last one. I can set active tab this.setActiveItem(10), but I'm not able to scroll (programmatically) tabbar to the last item. Content of the 10th tab is shown but 10th item on tabbar is hidden, so user could be confused.

Thanks a lot in advance.

回答1:

A really good question and many people may find this useful.

So first, instance of tabBar is needed so we can get activeTab of tabPanel. Then we can easily get the offset of tab item. Here, tab item means not the container that holds tab's contents but the tab indicator which can either is placed at top or bottom. So we just need offset of active tab item from tabBar not the container.

    this.getMyTabPanel().setActiveItem(6);

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

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

Next part is, to get instance of tabBar scroller. Once we get this we can pragmatically scroll it do desired position we get in above step.

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

    scroller.scrollTo(x,y);

Working demo is here

---

update

You can also enable animation while pragmatically scrolling with -

scroller.scrollTo(x, y, true);