Results 1 to 2 of 2

Thread: Help With JSONP Request and Basics

  1. #1

    Default Help With JSONP Request and Basics

    Hello. First off, I'm entirely new to Sencha and ExtJS. I've done my fair share of HTML, CSS, and JavaScript coding and I've coded some things in PHP and Perl but I'm no developer by any means. I like to think that I'm not absolutely retarded but I maybe getting closer after messing with Sencha Touch for a few days. Sencha Touch seems really neat and I've been playing with the website, trying to read the API documents, and thumbing through the examples.

    I'm trying to make an easy page that displays custom JSON feed data from an external server. I've looked through the examples of JSONP, YQL, and AJAX but I'm still not able to put all of the pieces together as I'm missing some basic knowledge of how it's all structured in general. For my JSON example file, I'll use the following:

    Code:
    "blogs":[{
       "title":"Title Data Here",
       "post":"Post Data Here",
       "date":"Date Value Here",
       "link": "URL Value Here"
       },{
       "title":"Title Data Here",
       "post":"Post Data Here",
       "date":"Date Value Here",
       "link": "URL Value Here"
       }
    ]
    I've used this in other places so I'm sure the data is fine and that's not the problem I'm having trouble with, just using Sencha Touch is what's confusing me. Taking code from the samples I've got the following code:

    Code:
    var blogTpl = new Ext.XTemplate([
            '<tpl for="item">',
                '<h2><a href="{link}"  target="_blank">{title}</a><small> on  {date}</small></h2>',
                '<p>{post}</p>',
            '</tpl>'
        ]);
    
    var makeJSONPRequest = function() {
            demos.Data.update('');
            Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');
            Ext.util.JSONP.request({
                url: 'http://www.myurl.com/feed/',
                callbackKey: 'callback',
                callback: function(result) {
                    var blogpost = result.data.blogpost;
                    if (blogpost) {
                        demos.Data.update(blogTpl.applyTemplate(blogpost));   
                        demos.Data.scroller.scrollTo({x: 0, y: 0});                     
                    }
                    else {
                        alert('There was an error retrieving the blog post.');
                    }
                    Ext.getBody().unmask();
                }
            });
        };
    So the top section of code is the template I want applied to the data shot back. Obviously the second part is the JSONP request. I've tried using this in several different methods but none of it is working for me. I'm not sure if the problem is in the way I'm handling some of the code above.

    If someone could provide me a simple working example of a scenario like this, I'd be forever eternally grateful. I'm excited about learning Sencha Touch, I'm just having some problems putting the basics together to get up and running for my first small app. Any insights would be greatly appreciated on how to handle this type of code.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243

    Default

    I am not sure what the issue was you were encountering, but my first guess is that your template was wrong. The tpl for="" is to loop over an array of items and apply the template to each one. You seem to be retrieving one particular post, and update the component with the data of that post. If that is the case, you would probably want to something like the following.

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        layout: 'card',
        indicator: false,
        onReady: function() {
            var postPanel = new Ext.Panel({
                fullscreen: true,
                scroll: 'vertical',
                tpl: new Ext.XTemplate([
                    '<h2><a href="{link}" target="_blank">{title}</a><small> on {date}</small></h2>',
                    '<p>{post}</p>'
                ]);
            });
            
            Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');
            
            Ext.util.JSONP.request({
                url: 'http://www.myurl.com/feed/',
                callbackKey: 'callback',
                callback: function(result) {
                    var blogpost = result.data.blogpost;
                    if (blogpost) {
                        postPanel.update(blogpost);
                        postPanel.scroller.scrollTo({x: 0, y: 0});
                    }
                    else {
                        alert('There was an error retrieving the blog post.');
                    }
                    Ext.getBody().unmask();
                }
            });
        }
    });

Similar Threads

  1. Help with Navigation Basics
    By parky128 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 28 May 2010, 1:33 AM
  2. Need help with LiveGrid basics
    By DonExt in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 7 Oct 2009, 1:13 AM
  3. Replies: 2
    Last Post: 11 Jun 2009, 7:04 PM
  4. Basics of Using Buttons
    By papajohn in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 4 May 2008, 5:18 AM
  5. BorderLayout basics...
    By eargang in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 20 Dec 2006, 5:44 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •