2013-09-06 5 views
2

Я новичок в ExtJs. Я создал виджет Twitter на твиттере. Он просто отлично работает на простой странице html. Как твиттере говорит вам просто нужно включитьДобавить виджет Twitter в панель extjs

<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 панель. Он создает только гиперссылку, а не виджет. Может кто-нибудь мне помочь.

+0

я попытался включить его в html, теге iframe и т. д. –

+0

Это не работает для меня, когда я вставляю код в обычную HTML-страницу. – rixo

+0

Вам нужно будет обновить идентификатор-widget-id. Простой виджет может быть создан из twitter> настроек –

ответ

4

Если кто-то ищет ответ, вот как я достиг его,

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

В объекте конфигурации, который вы передаете конструктору Ext.Panel, просто включите строку для свойства html. Значение свойства - это только строка HTML, которая определяет ваш виджет Twitter.

+0

Я пробовал это, не работая. Можете привести пример. –

1

Перемещение яваскрипта часть в 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"); 
     } 
    } 
}); 
+0

Нет. Не работает. –

+0

Да, это так! http://jsfiddle.net/rixo/WhUQX/ – rixo

+0

Я использую sencha, и он бросает Object # не имеет метода 'widget' –

Смежные вопросы