Question

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

[更新] 的

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

此代码现已完全正常运行。我忘了：this.callParent（arguments）;

我把示例放在SenchaFiddle前两个标签将不会加载，因为ajax调用失败，但最后两个ComponentQuery确实有效。

以下是屏幕应该如何显示的想法：

enter image description here

以下是基本观点：

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

尝试将此添加到您的视图中（未测试）：

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资源以获取更多帮助。

Answer 2

除非您要加载大量images，video's，audio's等重数据，否则我看不到任何差异< / em>两种方法之间，即当用户点击这些选项卡时加载或在应用程序启动时立即加载。

检查您在这些标签中加载的数据并进行相应的工作。

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

Answer 3

简单：

正常添加按钮，因为它是一个标签... 然后，在tabpanel配置元素中，添加：

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

将外部网址加载到tabpanels中？

3 个答案: