How to use events -- what event is triggered when a tab activates a container? (extjs 6.5)

Question

While using the sencha extjs 6.5 framework I had a problem with the events.. What I wish to do is create a store that postpones loading until after a tab is activated. (and reload each time a person goes back to that tab).

Now manual loading isn't hard. However I can't seem to find the trigger that occurs when a tab is activate.

The tabs are defined by the main view (which is shown as main in app.js):

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.MessageBox',
        'Ext.layout.Fit',
    ],

    controller: 'main',
    viewModel: 'main',

    defaults: {
        tab: {
            iconAlign: 'top'
        }
    },

    tabBarPosition: 'left',

    items: [
        {
            title: 'Users',
            iconCls: 'x-fa fa-user',
            layout: 'fit',
            items: [{
                xtype: 'usercontainer',
            }],
        },{
            title: 'Home',
            iconCls: 'x-fa fa-home',
            layout: 'fit',
            items: [{
                xtype: 'ordercontainer'
            }]
        },
    ]
});

The second tab is the one I'm interested in, it has the following definition:

Ext.define('BinkPortalFrontend.view.main.OrderContainer', {
    //extend: 'BinkPortalFrontend.view.main.BaseContainer',
    xtype: 'ordercontainer',
    controller: 'order',
    extend: 'Ext.Container',
    layout: 'vbox',

    listeners: {
        activate: function(me, oOpts) {
            console.log('activating');
        },

        enable: function(me, oOpts) {
            console.log('enabling');
        },

        focus: function(me, oOpts) {
            console.log('focus');
        },
        focusenter: function(me, oOpts) {
            console.log('focus');
        },
        focusleave: function(me, oOpts) {
            console.log('focus');
        },
        show: function(me, oOpts) {
            console.log('show');
        },
    }
});

As one can quickly see, I've tried testing all kinds of events. However only the activate event seems to fire -at page load-. What am I doing wrong? I'm not fully seeing which of the many events would be useful (see here)

score 2 · Accepted Answer · answered Feb 25 '18 at 08:05

2

You may want to listen for the tabchange(tabPanel, newCard, oldCard, eOpts) event on the tabpanel, and then fire your own event on the newCard (and maybe a different one on the oldCard).

answered Feb 25 '18 at 08:05

Alexander

19,906
19
75
162

This indeed works - though it's a roundabout way; so if there exists a formal event I'd like to know that. – paul23 Feb 26 '18 at 14:57
@paul23 I did not find one, although I combed through the ExtJS code. – Alexander Feb 26 '18 at 15:26

score 1 · Answer 2 · answered Nov 08 '18 at 21:06

I realize this is a very old question with an answer already. But I hope for future people (like myself) who find this, here is another perspective.

The "activate" event is fired on the tab itself when it is activated. See documentation: https://docs.sencha.com/extjs/6.5.2/classic/Ext.container.Container.html#event-activate

It doesn't work in your example most likely because you've nested (unnecessarily?) the "OrderContainer" inside another panel called "Home". Home receives the "activate" event correctly every time the user opens the tab, but its' children (like OrderContainer, who is doing the listening) do not.

So my suggestions are either:

Rearrange your logic so the "home" component is the one who is listening to the "activate" event and doing whatever loading you want to do.
Remove the "Home" panel entirely, and just use the orderContainer directly.

If you only have the "Home" there to provide a title and icon, you can add those to OrderContainer instead via tabConfig property:

items: [
  {
     xtype: 'ordercontainer'
     tabConfig: {
        title: 'Home',
        iconCls: 'x-fa fa-home'
     }
  }
]

How to use events -- what event is triggered when a tab activates a container? (extjs 6.5)

2 Answers2