Question

我在Sencha Touch中设置了一个带有2个标签的简单面板：

ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
    title: "home",
    iconCls: "home",
    defaults: {
        styleHtmlContent: true
    },
    items: [{
        title: 'Playlist',
        scroll: 'vertical',
        html: 'test'
    },{
        title: 'Comments',
        scroll: 'vertical',
        autoLoad: {url: 'disqus.html', scripts: true}
    }]
});

Ext.reg('homecard', ToolbarDemo.views.Homecard);

在“评论”标签上，我尝试包含一个与我的应用的index.html文件处于同一级别的disqus.html文件，但没有显示任何内容。从谷歌搜索似乎我已正确输入自动加载代码，但也许我错过了另一步？

有人可以帮助我吗？

谢谢，

尼克

Disqus代码：

<div id="disqus_thread"></div>

    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname

        // The following are highly recommended additional parameters. Remove the slashes in front to use.
        var disqus_identifier = 'test';
        // var disqus_url = 'http://example.com/permalink-to-page.html';

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Answer 1

“autoLoad”属性仅在ext.js中，尚未在sencha-touch中可用。

但你可以这样做（你的里程会有所不同）：

Ext.setup({
onReady: function() {
    var tabPanel = new Ext.TabPanel({
        fullscreen: true,
        type: 'dark',
        sortable: true,
        items: [{
            title: 'Tab 1',
            html: '1',
            cls: 'card1',
        }, {
            title: 'Tab 2',
            html: '2',
            cls: 'card2'
        },
        {
            title: 'Tab 3',
            html: '3',
            cls: 'card3'
        }]
    });
    Ext.Ajax.request({
      url: 'disqus.html',
      success: function(response, opts) {
      tabPanel.items.get(2).update(response.responseText, true);  //2nd parameter is "loadScripts"
    }
    });
  }
});

（disqus.html）

<html>
  <head>
  </head>
  <body>Hello World.</body>
</html>

Answer 2

我想带一段我用来获取外部HTML的代码。您可能会注意到，您应该使用回调而不是成功函数。不知道为什么，结果通常会导致失败功能。

    Ext.Ajax.request({
        url: url,
        method: 'GET',
        callback: function(options, success, response) {
            // do what you need with response.responseText
            // I'm updating a panel with styleHtmlContent: true,
        }
    });

Sencha Touch：设置自动加载以包含html文件

2 个答案: