2

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

[更新]

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

此代码现在功能齐全。我忘了：this.callParent(arguments);

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


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

在此处输入图像描述

在此处输入图像描述

这是基本视图：

Ext.define('SenchaFiddle.view.MainView', {
    扩展：'Ext.tab.Panel'，

    配置：{
        tabBarPosition:'底部',
        布局： {
            类型：'卡'，
            动画片： {
                持续时间：300，
                easing: '缓入出',
                类型：'幻灯片'，
                方向：“左”
            }
        },
        全屏：是的，

        项目： [
            {
                标题：“热门故事”，
                iconCls: '信息',
                xtype：'面板'，
                项目： [
                    {
                        标题：“热门故事”，
                        xtype: '工具栏',
                        停靠：'顶部'
                    },
                    {
                        id: '图片标签',
                        html: '正在加载头条新闻网址...'
                    }
                ]
            },
            {
                标题：“娱乐”，
                iconCls: '动作',
                项目： [
                    {
                        标题：“娱乐”，
                        xtype: '工具栏',
                        停靠：'顶部'
                    },
                    {
                        id: '新闻标签',
                        html: '正在加载娱乐网址...'
                    }
                ]
            },
            {
                id: 'tab3',
                标题：“体育”，
                iconCls: '用户'
            },
            {
                id: 'tab4',
                标题：“科学”，
                iconCls: '星'
            }
        ]
    },
    初始化：函数（）{
        console.log("视图初始化");
        Ext.Ajax.request({
            url: 'bar.html', // 你必须有权访问服务器
            方法：'GET'，
            回调：函数（选项，成功，响应）{
                console.log(response.responseText);
                Ext.ComponentQuery.query('#image-tab')[0].setHtml(response.responseText);
            }
        });

        Ext.Ajax.request({
            url: 'foo.html', // 你必须有权访问服务器
            方法：'GET'，
            回调：函数（选项，成功，响应）{
                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(参数); // 不要忘记这一点！
    }
});

foo.html

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

bar.html

<p style="color: #0f0;">
    酒吧
</p>
4

3 回答 3

2

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

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

urlForTopStories如果您有一个，这将在您的 .htaccess 文件中发送到您的服务器：

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

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

于 2012-05-10T15:34:10.063 回答
0

除非您要加载大量数据，例如很多images，video's等等audio's，否则我看不出这两种方法之间有任何区别，即在用户单击这些选项卡时加载或在应用程序启动时立即加载。

检查您在这些选项卡中加载的数据并相应地工作。

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

于 2012-05-10T14:21:56.667 回答
0

更简单：

正常添加按钮，因为它将是一个选项卡......然后，在 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
        }
    }
}
于 2014-04-17T14:00:40.797 回答