1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    nickharambee is on a distinguished road

      0  

    Default simple question about setting up autoload to include html file

    simple question about setting up autoload to include html file


    Hi

    I have a simple panel with 2 tabs:

    Code:
    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

  2. #2
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    -1
    Riaz is an unknown quantity at this point

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    nickharambee is on a distinguished road

      0  

    Default


    Quote Originally Posted by Riaz View Post
    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?

  4. #4
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    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..

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    nickharambee is on a distinguished road

      0  

    Default


    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:

    Code:
    ToolbarDemo = new Ext.Application({
        name: "ToolbarDemo",
    
        launch: function() {
            this.views.viewport = new this.views.Viewport();
        }
    });
    list_item.js:

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

    Code:
    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:

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

    Code:
    <!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:

    Code:
    <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

  6. #6
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    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....


  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    nickharambee is on a distinguished road

      0  

    Default


    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??

  8. #8
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Replies: 0
    Last Post: 26 Mar 2011, 12:24 PM
  2. Setting a combobox fieldLabel width to include long labels?
    By rtrocc in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 30 Dec 2010, 9:36 AM
  3. How to include radio buttons in a simple grid.
    By Nimeshs in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Apr 2010, 5:08 AM
  4. include an other html- file
    By Generic1 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 28 Jul 2009, 6:43 AM
  5. viewport items html question (src or #include possible?)
    By jaypompano in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 21 Jan 2008, 8:01 AM

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi