PDA

View Full Version : Sencha Touch and external java script



9 Sep 2011, 12:17 AM
Hi, I am a sencha touch newbee and need to know if i can load external javascript into a sencha touch application.

Actually I have a button and via this i need to post comment on my face book wall.
I used "AddThis" for this and they simply give a copy and paste set of divs and java script to be placed in the html file. Here is the javascript that they provided
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e68c0060770fbd6"></script>
<!-- AddThis Button END -->
Works well on an HTML page
But not on the sencha page.
Can some one throw some light on this?

NickT
9 Sep 2011, 5:01 AM
did you try by adding this html to an Ext.Panel?
It has an html config property, so you can define your panel and set the html as you would like...



{
xtype: 'panel',
html:<your html here>
...
}


if that doesnt work (because you have a script tag), then try calling update in the render listener. the update method's second parameter indicates whether to execute scripts


{ xtype:'panel',
html:'',
height: 100,
listeners:{
'render': function(panel) {
var html = '<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e68c0060770fbd6"></script>';
panel.update(html, true, function() {
// called after the scripts are loaded. this is an optional param
});
}
}
},

13 Sep 2011, 12:17 AM
Hi,
Thanks for your reply. Sorry I wasn't able to correctly use it. :(
what I did was...
i called the action facebookComment implemented at the controller for handeling the button press
I am using MVC, so it goes like
View
List
button : facebookbutton
handler: onFacebookCommentAction
action for onFacebookCommentAction : facebookComment
implementation for action facebookComment:



facebookComment: function(){

if (!this.popup) {
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
listeners:{
'render': function(panel) {
html = '<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e68c0060770fbd6"> </script>';
panel.update(html, true, function() {

});
}
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}]
});
}
this.popup.show('pop');

}


I really have no clue what I am missing. However the popup does comes which is blank.