Loading external URLs into tabpanels?

Question

I have a simple app that will load hosted web pages that I want to display in separate tab panels. What's the cleanest way to do this? The tabs could be loaded as the user clicks on each tab or all could load at once on app startup. Sencha Touch doesn't have a way to simply make the html: value be a URL. Can I add some page load event for each tab?

[Update]

I added the suggestions to make the Ajax call in the initialize: method, using local html files for testing. However, all tabs show the first Ajax result to complete.

This code is now fully functional. I forgot: this.callParent(arguments);

I put the example on SenchaFiddle The first two tabs won't load because the ajax calls fail, but the last two ComponentQuery's do work.

Here's an idea of how the screens should look:

Here's the basic view:

Ext.define('SenchaFiddle.view.MainView', {
    extend: 'Ext.tab.Panel',

    config: {
        tabBarPosition:'bottom',
        layout: {
            type: 'card',
            animation: {
                duration: 300,
                easing: 'ease-in-out',
                type: 'slide',
                direction: 'left'
            }
        },
        fullscreen: true,

        items: [
            {
                title: 'Top Stories',
                iconCls: 'info',
                xtype: 'panel',
                items: [
                    {
                        title: 'Top Stories',
                        xtype: 'toolbar',
                        docked: 'top'
                    },
                    {
                        id: 'image-tab',
                        html: 'Loading top stories url...'
                    }
                ]
            },
            {
                title: 'Entertainment',
                iconCls: 'action',
                items: [
                    {
                        title: 'Entertainment',
                        xtype: 'toolbar',
                        docked: 'top'
                    },
                    {
                        id: 'news-tab',
                        html: 'Loading entertainment url...'
                    }
                ]
            },
            {
                id: 'tab3',
                title: 'Sports',
                iconCls: 'user'
            },
            {
                id: 'tab4',
                title: 'Science',
                iconCls: 'star'
            }
        ]
    },
    initialize: function() {
        console.log("View initialized");
        Ext.Ajax.request({
            url: 'bar.html', // you must have access to the server
            method: 'GET',
            callback: function(options, success, response) {
                console.log(response.responseText);
                Ext.ComponentQuery.query('#image-tab')[0].setHtml(response.responseText);
            }
        });

        Ext.Ajax.request({
            url: 'foo.html', // you must have access to the server
            method: 'GET',
            callback: function(options, success, response) {
                console.log(response.responseText);
                Ext.ComponentQuery.query('#news-tab')[0].setHtml(response.responseText);
            }
        });
        Ext.ComponentQuery.query('#tab3')[0].setHtml("boom");
        Ext.ComponentQuery.query('#tab4')[0].setHtml("bang");

        this.callParent(arguments);  // Don't forget this!
    }
});

foo.html

<p style="color: #00f;">
    foo
</p>

bar.html

<p style="color: #0f0;">
    bar
</p>

Answer 1

Try adding this to your view (not tested):

Ext.Ajax.request({
    url: 'http://www.urlForTopStories', // you must have access to the server
    method: 'GET',
    callback: function(options, success, response) {
        Ext.ComponentQuery.query('#image-tab')[0].setHtml(response.responseText);
    }
});  

And this to your server for urlForTopStories in your .htaccess file if you have one:

Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers x-requested-with

If you're not on Apache check out this CORS resource for more help.

Answer 2

Unless you are loading something heavy data like lots of images, video's, audio's etc, I don't see any difference between the two approaches i.e loading when user clicks on those tabs or load at once when application starts-up.

Check the data you'r loading in those tabs and work accordingly.

If you want to load the data on application startup, use the initialize() method.

Answer 3

Simpler:

add the button normally as it would be a tab... then, in tabpanel config element, add:

listeners: {
    activeitemchange: function(source, value, oldValue, eOpts) {
        if(value.id == 'chiama') {
                            // do actions...
            // for example open a link: 
                            // document.location = 'www.google.it';

            source.setActiveItem(oldValue); //avoid tab switching
            return false; // avoid tab switching
        }
    }
}