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

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

[更新]

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

这段代码现在功能齐全。我忘了：this.callParent（参数）

我将示例放在前两个选项卡上，因为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! } }); Ext.define（'senchabiddle.view.MainView'{ 扩展：“Ext.tab.Panel”， 配置：{ tabbar位置：'bottom'， 布局：{ 键入：“卡”， 动画：{ 持续时间：300， 放松：“放松进入”， 键入：“幻灯片”， 方向：“左” } }, 全屏：对， 项目：[ { 标题：“热门故事”， iconCls:'信息'， xtype:'面板'， 项目：[ { 标题：“热门故事”， xtype:'工具栏'， 停靠：“顶部” }, { id:“图像选项卡”， html:“正在加载顶级故事url…” } ] }, { 标题:"娱乐",， iconCls:“行动”， 项目：[ { 标题:"娱乐",， xtype:'工具栏'， 停靠：“顶部” }, { id:“新闻选项卡”， html:“正在加载娱乐url…” } ] }, { id:'表3'， 标题:"体育",， iconCls:'用户' }, { id:‘表4’， 标题:"科学",， iconCls:“明星” } ] }, 初始化：函数（）{ console.log（“视图已初始化”）； Ext.Ajax.request({ url:'bar.html'，//您必须有权访问服务器 方法：“GET”， 回调：函数（选项、成功、响应）{ console.log（response.responseText）； Ext.ComponentQuery.query（“#图像选项卡”）[0].setHtml（response.responseText）； } }); Ext.Ajax.request({ url:'foo.html'，//您必须有权访问服务器 方法：“GET”， 回调：函数（选项、成功、响应）{ console.log（response.responseText）； Ext.ComponentQuery.query（“#新闻选项卡”）[0].setHtml（response.responseText）； } }); Ext.ComponentQuery.query（'#tab3'）[0].setHtml（“boom”）； Ext.ComponentQuery.query（'#tab4'）[0].setHtml（“bang”）； this.callParent（arguments）；//别忘了这个！ } }); foo.html

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

福

bar.html

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

酒吧

---

除非您正在加载一些沉重的数据，如大量的

图像

、

视频

、

音频

等，否则我看不到这两种方法之间的任何区别，即当用户单击这些选项卡时加载或当应用程序启动时立即加载

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

---

如果要在应用程序启动时加载数据，请使用

initialize（）

方法。

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

如果您有一个.htaccess文件，请将其发送到您的服务器，用于.htaccess文件中的

urlForTopStories

：

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

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

更简单：

正常添加按钮，因为它将是一个选项卡。。。 然后，在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
        }
    }
}

---

您想在所有这些选项卡中显示列表吗？我不认为他问的是哪种方法更好，而是这两种方法对他都是可行的。我想他想知道如何用该url中的实际html替换

'Loading top stories url…'

。您似乎需要查询的索引：Ext.ComponentQuery.query（'#image tab'）[0]。setHtml（response.responseText）；不知道为什么。要更新您的答案吗？另外，我尝试加载两个选项卡，但它们都显示第一个值。我用你们的代码更新了我的问题。更新-你们说它们都显示第一个值是什么意思，foo和bar都显示“foo”？我忘了这个。callParent（参数）；现在一切都很好。谢谢

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