Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    djd is on a distinguished road

      0  

    Default Sencha Touch + Facebook Graph API

    Sencha Touch + Facebook Graph API


    Hey guys, first of all, since this is my first post, I'd just like to say nice work on Sencha Touch- I think it has a bright future.

    Now I've been reading through all the documentation I could find, but I can't quite figure out the most reasonable way to parse data from Facebook through their GraphAPI, put it in Store, and update the UI. I'm not trying to authenticate just yet, I just want to get whatever data is publicly available for a certain page.

    This page returns the following JSON formatted document:

    Code:
    {
       "id": "19292868552",
       "name": "Facebook Platform",
       "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs451.snc4/50414_19292868552_7650_s.jpg",
       "link": "http://www.facebook.com/platform",
       "category": "Product/service",
       "website": "http://developers.facebook.com",
       "username": "platform",
       "founded": "May 2007",
       "company_overview": "Facebook Platform enables anyone to build social applications on Facebook and the web.",
       "mission": "To make the web more open and social.",
       "likes": 1298659
    }
    And in my Sencha Touch project, I've got the following code executing as the handler of a button on a toolbar:
    Code:
                            Ext.regModel('Graph', {
    						    fields: [
    								'id',
    								'name',
    								'picture',
    								'link',
    								'category',
    								'website',
    								'username',
    								'founded',
    								'company_overview',
    								'mission',
    								'likes'
    							]
    						});
    
    						var store = new Ext.data.Store({
    						    model: 'Graph',
    							autoLoad: true,
    						    proxy: {
    						        type: 'scripttag',
    						        url : 'https://graph.facebook.com/19292868552'
    						    },
    							reader: {
    								type: 'json'
    							}
    						});
    						
    						console.log(store);
                        }
    This code executes just fine inside Chrome, but not how I thought it might. 'console.log(store)' show's an 'Object' tree that looks like this:
    Code:
    Object
    • autoLoad: true
    • data: Object
    • events: Object
    • eventsSuspended: false
    • filters: Object
    • loading: false
    • model: function (){h.apply(this,arguments)}
    • modelDefaults: Object
    • proxy: Object
    • reader: Object
    • removed: Array[0]
    • snapshot: Object
    • sortToggle: Object
    • sorters: Object
    • __proto__: Object
    Navigating through the tree I can see that 'store.data' has 'length: 0' and 'items: Array[0]' amongst several other properties. I can also see that 'store.proxy.reader.jsonData' contains all of the JSON data I'm after. If I try console.log(store.proxy.reader.jsonData), 'undefined' is printed to the console. I experimented using Ext.data.JsonStore for my store but couldn't figure that out either.

    I've seen many posts on using ScriptTagProxy, Store, and DataView, but I just don't get it. What am I missing?

    What is the proper use of DataView to bind to a Store and update the UI in this situation?

    Thanks for any insight you can give.
    Last edited by djd; 20 Jan 2011 at 9:26 AM. Reason: reformat

Similar Threads

  1. Is it possible to integrate Facebook authentication into Sencha Touch
    By directx0000 in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 23 Nov 2011, 6:49 AM
  2. Sencha Touch API Documentationについて
    By kuro in forum Japanese Sencha Forum
    Replies: 2
    Last Post: 12 Sep 2010, 8:49 PM
  3. Replies: 2
    Last Post: 9 Sep 2010, 10:24 AM

Thread Participants: 3

Tags for this Thread