Sencha Touch evento activeitemchange

Mattepuffo's logo
Sencha Touch evento activeitemchange

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!


Condividi

Commentami!