Sencha Touch: setting up autoload to include html file
I have set up a simple panel in Sencha Touch with 2 tabs:
ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "home",
iconCls: "home",
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Playlist',
scroll: 'vertical',
html: 'test'
},{
title: 'Comments',
scroll: 'vertical',
autoLoad: {url: 'disqus.html', scripts: true}
}]
});
Ext.reg('homecard', ToolbarDemo.views.Homecard);
On the 'Comments' tab I am trying to include a disqus.html file which is at the same level as the index.html file for my app, but nothing is showing up. From googling about it would seem that I have entered the autoload code correctly, but perhaps I have missed out another step?
Could someone help me on my way?
Thanks,
Nick
Disqus code:
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
var disqus_identifier = 'test';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body'开发者_如何学Python)[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
The "autoLoad" property is only in ext.js and not yet available in sencha-touch.
But you can do something like this (Your mileage WILL vary):
Ext.setup({
onReady: function() {
var tabPanel = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1',
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
},
{
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
Ext.Ajax.request({
url: 'disqus.html',
success: function(response, opts) {
tabPanel.items.get(2).update(response.responseText, true); //2nd parameter is "loadScripts"
}
});
}
});
(disqus.html)
<html>
<head>
</head>
<body>Hello World.</body>
</html>
I'd like to bring a piece of code that I use to get an external html. As you may note, you should use callback, instead of success function. Not sure why, often the result goes to failure function.
Ext.Ajax.request({
url: url,
method: 'GET',
callback: function(options, success, response) {
// do what you need with response.responseText
// I'm updating a panel with styleHtmlContent: true,
}
});
加载中,请稍侯......
精彩评论