无法捕获选项卡更改事件

Question

I'm using button to move between tabs. But for that I have to remember the user's tab position. So my buttons keep working when the user leaves the screen and returns later.

The tabchange event should be the event to use for that, however I cannot get it to trigger.

View:

Ext.define('MyApp1.view.Home',
{
    extend: 'Ext.form.Panel',

    requires:
    [
        'Ext.tab.Panel'
    ],

    xtype: 'home',

    config:
    {
        itemId: 'home',
        layout: 'fit',

        items:
        {
            xtype: 'tabpanel',
            tabBarPosition: 'top',
            height: 500,
            renderTo: document.body,
            listeners:
            {
                beforetabchange: function (tabs, newTab, oldTab)
                {
                    console.log('tab is going to change');
                },
                tabchange: function ()
                {
                    console.log('recorded tab change from listener');
                },
                change: function ()
                {
                    console.log('change of tab from listener');
                }
            },

            items:
            [
                {
                    title: 'one'
                },
                {
                    title: 'two'
                }
            ]
        }
    }
});

Controller:

Ext.define('MyApp1.controller.HomeController',
{
    extend: 'Ext.app.Controller',

    requires:
    [
        'MyApp1.view.Main'
    ],

    config:
    {
        refs:
        {
            home: 'home'
        },
        control:
        {
            home:
            {
                beforetabchange: 'onTabChange',
                tabchange: 'onTabChange',
                change: 'onTabChange'
            }
        }
    },

    init: function()
    {
        console.log('HomeController initialized');
    },

    onTabChange: function ()
    {
        console.log('active tab changed');
    }
});

So I see the initialization text in the log but none of the tab change events when I click the tab buttons.

Answer 1

原来我是在看ExtJs 5文档，而不是Sencha 2.4.1文档...。该文档仅具有'activeitemchange'事件。

Answer 2

First off it seems you can only implement these listeners on the tabBar of the tabPanel

Having looked through the source code though it seems that this never get's fired even though it is documented. http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/source/Bar3.html#Ext-tab-Bar-event-tabchange

What I could suggest is either as you pointed out to hook into the activeitemchange event on the panel or activetabchange (which strangely is firing twice) event of the tabbar as activeitemchange also seems not to work as intended.

https://fiddle.sencha.com/#fiddle/g44