Skip to content

December 9, 2015

How to Embed Twitter Widget into ExtJs Panel

by Joe Kuan

In order to embed Twitter page into ExtJs Panel, we need to first create a Twitter Widget. Go to Twitter account page, select Settings/Widgets.


Click ‘Create New’, then you should see a Widget setting screen with your own tweeter page as default. Alternatively, we can create a widget with other tweet page by changing the ‘username’. The following screen demonstrates a widget creation page with another username.


At the bottom of the page, there is a container box at the right hand side which have two lines of HTML code. Click ‘Save Changes’ and copy the HTML code onto a clipboard.


Here is what the code looks like (following is a screenshot to avoid HTML conflicting with WordPress):


It is very simple to embed Twitter into a panel. Simply pastes the HTML <a> tag into the panel html property. Then copies the Javascript code inside the <script> to afterrender event handler.

Here is the sample of the code:

xtype: 'panel',
html: '&lt;a class="twitter-timeline" href="" data-widget-id="674515262809485312"&gt;Tweets by @iTrinegy&lt;/a&gt;',
itemId: 'twitter',
layout: 'fit',
title: 'Tweets',
listeners: {
afterrender: function() {
!function(d,s,id) {
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';

Here is a screenshot of an ExtJs app with Twitter page.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: