Question

我是ExtJs的新手。我在twitter上创建了一个推特小部件。它只适用于简单的html页面。正如twitter所说，你只需要包括

<a class="twitter-timeline" href="https://twitter.com/search?q=%23certain" data-widget-id="widget-id">Tweets about "#certain"</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

将此设置为html会在UI上创建一个漂亮的小部件，但我希望将其包含在extjs面板中。它只创建一个超链接而不是小部件。任何人都可以帮助我。

Answer 1

如果有人在寻找答案，我就是这样做的，

var tweetHtml = '<a class="twitter-timeline" href="https://twitter.com/search" data-widget-id="your-widget-id" height="' + height + '" >Tweets for Certain Mobile</a>';
var dialog = new Ext.Panel({
    xtype: 'panel',
    height: '100%',
    border: false,
    scroll: 'vertical',
    listeners: {
        single: true, // Remove the listener after first invocation
        afterrender: function() {
            ! function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0],
                    p = /^http:/.test(d.location) ? 'http' : 'https';
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = p + "://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, "script", "twitter-wjs");
        }
    },
    html: tweetHtml
});

Answer 2

在传递给Ext.Panel的构造函数的config对象中，只包含html属性的一行。该属性的值只是定义Twitter小部件的HTML字符串。

Answer 3

将javascript部分移动到面板的afterrender监听器中：

Ext.widget('panel', {
    renderTo: Ext.getBody()
    ,title: "Tweeter!"
    ,width: 500
    ,height: 300
    ,html: '<a class="twitter-timeline" href="https://twitter.com/search?q=%23certain" data-widget-id="widget-id">Tweets about "#certain"</a>'
    ,listeners: {
        afterrender: function() {
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
        }
    }
});

将twitter小部件添加到extjs面板中

3 个答案: