将外部URL加载到选项卡中？

Question

我有一个简单的应用程序，将加载托管的网页，我想显示在单独的选项卡面板。最干净的方法是什么？选项卡可以在用户点击每个选项卡时加载，或者在应用程序启动时一次加载所有选项卡。Sencha Touch没有办法简单地使html： value成为一个URL。我可以为每个选项卡添加一些页面加载事件吗？

[更新]

我添加了使用本地html文件进行测试的初始化：方法中的Ajax调用的建议。但是，所有选项卡都显示要完成的第一个Ajax结果。

此代码现已完全正常运行。我忘了：this.call家长（争论）；

我把这个例子放在SenchaFiddle上，前两个选项卡不会加载，因为ajax调用失败，但是最后两个ComponentQuery可以工作。

下面是屏幕应该如何看的想法：

以下是基本观点：

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

更简单：

正常添加按钮，因为它将是一个选项卡。。。然后，在tabpanel config元素中，添加：

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
        }
    }
}

Answer 2

除非您正在加载大量的数据，如大量的图像、视频、音频等，否则我看不到这两种方法之间的任何区别，即当用户单击这些选项卡时加载或当应用程序启动时立即加载。

检查您正在这些选项卡中加载的数据，并进行相应的操作。

如果要在应用程序启动时加载数据，请使用initialize（）方法。

Answer 3

尝试将其添加到视图（未测试）：

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);
    }
});  

如果您有. htaccess文件中的urlForTopStory，则将其发送到服务器：

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

如果您不在Apache上，请查看此CORS资源以获取更多帮助。