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)
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
).