如何在ExtJS中添加Facebook共享按钮

Question

我在facebook上获得了"分享"按钮的代码以及说明:

在您的网页上包含一次JavaScript SDK,最好是在开始标记之后.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

将插件的代码放在您希望插件显示在页面上的任何位置.

<div class="fb-share-button" data-href="http://recovery.twindb.com" data-layout="button_count"></div>

所以我试图将它添加到ExtJS Web应用程序中.

我有一个视图,我在其中添加了fb-root容器以及fbxxx我想要放置按钮的位置:

Ext.define('recovery.view.Main', {
extend: 'Ext.container.Container',
...
items: [{
    xtype: 'container',
    id: 'fb-root',
    width: 50,
    height: 20,
    items: [{
        xtype: 'container',
        id: 'fbxxx'
    }]
}]
listeners: {
    beforerender: function (container) {
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        var html = '<div class="fb-share-button" data-href="http://recovery.twindb.com" data-layout="button_count"></div>';
        var ctn = container.down('#fbxxx');
        console.log(ctn);
        ctn.update(html);
    }

然而,这不起作用.控制台中没有错误,但没有显示任何按钮.我究竟做错了什么？

Answer 1

您可以在html文件中添加JavaScript SDK.

(您也可以使用它Ext.mixin.Mashup来加载JavaScript SDK)

一个工作的例子:

https://fiddle.sencha.com/#fiddle/ule