PDA

View Full Version : simple question about setting up autoload to include html file



nickharambee
27 Apr 2011, 2:42 PM
Hi

I have a simple panel 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. I have searched this forum, and 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

Riaz
27 Apr 2011, 5:46 PM
Why are you trying to call any html file from tab event?
What i did, I have created several js files and calling from tab event.

nickharambee
28 Apr 2011, 1:39 AM
Why are you trying to call any html file from tab event?

Thanks Riaz. I would like the Disqus comments to show in the 'comments' tab and I thought that using autoload in the tab event would be the way to achieve this. Could you let me know the correct way to include the Disqus HTML/script?

realjax
28 Apr 2011, 2:47 AM
Why are you extending the TabPanel ? I can't see the point and besides that, it's not done correctly.
Are you also creating an instance of it? Is this your complete code?

I'm not sure that a the Touch tabpanels support autoloading like you have implemented. I can't find any references in the Touch API docs. That is, *correct* references, I can find plenty of invalid ones if you search the api..

nickharambee
28 Apr 2011, 3:08 AM
Thanks, and sorry if I am missing the point. I am new to Sencha.

I simply took the code from the 'Building a user interface with TabPanels and Toolbars' demo. I removed extra pages, so that I just have one page with 2 tabs at the top.

So I have the following files:

app.js:


ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",

launch: function() {
this.views.viewport = new this.views.Viewport();
}
});

list_item.js:


Ext.regModel('ListItem', {
fields: [
{name: 'text', type: 'string'},
{name: 'card'}
]
});

homecard.js:


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

Viewport.js:


ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard' }
]
});

and index.html:


<!DOCTYPE html>
<html>
<head>
<title>Toolbars in Sencha Touch</title>
<link rel="stylesheet" href="lib/sencha-touch.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen"/>

<script src="lib/sencha-touch-debug.js" type="text/javascript"></script>
<!-- app, models, stores, views, controllers [in that order!] -->
<script src="app/app.js" type="text/javascript"></script>
<script src="app/models/list_item.js" type="text/javascript"></script>
<script src="app/views/homecard.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>

</head>
<body>
</body>
</html>

I would like to have Disqus comments show in the 'Comments' tab of the 'Home' page. The Disqus code consists of html and javascript:


<div id="disqus_thread">
</div>

<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = ''; // 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_title = '';
// 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')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

And I am not sure how to include this,

Nick

realjax
28 Apr 2011, 3:34 AM
I see. Funny.. the example you took makes things even more unclear for new users, because it does 'magical things' like
this.views.viewport = new this.views.Viewport();

Do you have any idea as to what happens there ?

Either way, I think you are in for bigger problems. Like I said, I'm not sure you can use the same url loading
mechanisme in Touch as you can in Extjs (which is where the syntax you used came from).
So you could maybe include the discuss thing as HTML. And maybe even have it execute the included script.

And then if it does, your application will blow up.
Because that discuss script starts adding things to the body dom element....

nickharambee
28 Apr 2011, 3:46 AM
It is starting to sound like I shouldn't be using Sencha to build my Mobile Web page/application at all? It was suggested on Stack Overflow that it would be a good library to use.

Maybe I should switch to jQuery Mobile??

realjax
28 Apr 2011, 6:29 AM
jQuery Mobile won't solve the future problem you'll encounter with the discuss script. Maybe a better way to approach this is to take a look at that script, see what it does and then incorporate it's functionalities in you app in such a way that it'll behave nicely.