sencha-touch-2 - 将外部 URL 加载到选项卡面板中？

Question

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

[更新]

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

此代码现已完全正常运行。我忘记了:this.callParent(arguments);

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

以下是屏幕外观的一个想法:

这是基本 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

尝试将其添加到您的 View 中(未测试):

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 文件中的 urlForTopStories，请将其发送到您的服务器:

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

如果您没有使用 Apache，请查看此 CORS资源以获取更多帮助。