Sencha Touch evento activeitemchange
Il componente TabPanel di Sencha Touch è fornito di vari eventi.
Uno di questi è activeitemchange, attivato quando si cambia tab.
Usando questo evento possiamo identificare un tab preciso e attivare qualcosa.
Questo è un esempio di TabPanel composto da vari componenti diversi tipo Carousel o FormPanel, tranne l'ultimo che serve solo per linkare a un indirizzo esterno:
new Ext.TabPanel({
fullscreen: true,
tabBarPosition: 'bottom',
tabBar: {
scrollable: {
direction: 'horizontal'
}
},
items: [
panelHome,
navPdv,
carAdvertising,
formContact,
carCompany,
// LAST ITEM
{
title: 'LINK',
iconCls: 'action'
}
],
listeners: {
activeitemchange: function (tabPanel, tab, oldTab) {
if(tab.config.title == 'LINK') {
Ext.Msg.alert('activeitemchange', 'Current tab: ' + tab.config.title);
window.location = 'http://www.another-site.com';
}
}
}
});
}
});
Alla fine di tutti i componenti c'è un listener che richiama l'evento.
Nel caso in cui il tab cliccato sia LINK prima comparirà un messaggio con il titolo del tab (solo a scopo dimostrativo) e poi si viene reindirizzati a un altro sito.
Molto easy!
sencha touch tabpanel activeitemchange
Commentami!