Question

How do I fire an event when a tab is loaded in Sencha Touch? I want to AJAX in some content that isn’t important enough to be loaded immediately, and Sencha Touch seems to miss the autoLoad property of ExtJS.

What can I bind to on a panel to detect that the panel has been activated?

Answer 1

You can listen for the event activate in the panel itself or for the event cardswitch in the TabPanel.
The cardswitch event only fires after the first card has been set, so if you want an action to trigger on initialization, add a listener for the activate event on the TabPanel.

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        var tabpanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'light',
            cardSwitchAnimation: {
                type: 'slide',
                cover: true
            },

            //
            // Listen for cardswitch event in TabPanel
            //
            listeners: {
                cardswitch: function(comp, newCard, oldCard, index, animated) {
                    console.log(newCard.title, oldCard.title, index, animated);               
                }
            },

            defaults: {
                scroll: 'vertical'
            },
            items: [{
                title: 'About',
                html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
                iconCls: 'info',
                cls: 'card1',
                //
                // Listen for activate event in panel
                //
                listeners: {
                    activate: function(comp){
                        console.log(comp.title);
                        //
                        // Ajax Request
                        //
                        Ext.Ajax.request({
                            url: 'your_url_here.json',
                            success: function(response, opts) {
                                //
                                // Update panel html with ajax response
                                //
                                comp.update(response.responseText);
                            },
                            failure: function(response, opts) {
                                console.log('server-side failure with status code ' + response.status);
                            } 
                        });
                    }
                }
            }, {
                title: 'Favorites',
                html: '<h1>Favorites Card</h1>',
                iconCls: 'favorites',
                cls: 'card2',
                badgeText: '4'
            }, {
                title: 'Downloads',
                id: 'tab3',
                html: '<h1>Downloads Card</h1>',
                badgeText: 'Text can go here too, but it will be cut off if it is too long.',
                cls: 'card3',
                iconCls: 'download'
            }, {
                title: 'Settings',
                html: '<h1>Settings Card</h1>',
                cls: 'card4',
                iconCls: 'settings'
            }, {
                title: 'User',
                html: '<h1>User Card</h1>',
                cls: 'card5',
                iconCls: 'user'
            }]
        });
    }
});

More info on the Sencha Touch Docs:
http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabPanel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel