Question

I need to add the following contents inside a panel in sencha touch2

<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out for more......" data-size="large" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

But it is just rendering

<div class="x-innerhtml " id="ext-element-156"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out for more @z" data-size="large" data-dnt="true">Tweet</a>                   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> 

instead of

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1352365724.html#_=1353049473087&amp;count=horizontal&amp;dnt=true&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Flocalhost%2Fmyapp%2Fchannel.html&amp;size=l&amp;text=Check%20out%20for%20more......&amp;url=http%3A%2F%2Flocalhost%2Fmyapp%2Fchannel.html" class="twitter-share-button twitter-count-horizontal" style="width: 136px; height: 28px; " title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
<script id="twitter-wjs" src="//platform.twitter.com/widgets.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I am using the following code in sencha

var tweetbtn = {
                xtype: 'panel',
                name: 'tweetbtn', 
                 id:"tweetbtn",
                width:100,height:100,
                html:'<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out for more......" data-size="large" data-dnt="true">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>',

                } ;

Anything I missed out ?

Answer 1

You cannot add tags to html properties as you have shown above. All the javascript is really doing is loading the external Twitter javascript file and appending it to your element. You should really just utilize the loadScriptFile function (http://docs.sencha.com/touch/2-1/#!/api/Ext.Loader-method-loadScriptFile) once the panel is rendered to load the external Twitter file.