Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    7
    Vote Rating
    0
    mobitinker is on a distinguished road

      0  

    Default How to debug loading of store

    How to debug loading of store


    Hi,

    I've gotten stuck on loading a store and am wondering how to debug the problem. If someone can see my mistake I'd be most grateful.

    My app is trying to load a list from Google's RSS feed widget. I'm using the scripttag pattern to load the list's store. Things seem to flow as expected, but the store does not get loaded.

    I can see the scripttag request being returned from the server with the expected data. The Chrome debugger reports trouble as:

    Uncaught TypeError: Cannot read property 'length' of undefined. Tracing the stack I see this is coming from this line in sencha-touch-debug-w-comments.js:

    at Ext.data.Reader.Ext.extend.read which is seeing the response value of '0' at
    result = reader.read(response)

    Watching traffic with Fiddler I see in JSON view this, which looks as expected:



    The raw text coming from the server starts like this:

    stcCallback1001('0', {"feed":{"feedUrl":"http://www.mercycorps.org/blog/feed","title":"Mercy Corps blogs","link":"http://www.mercycorps.org/blog.html","author":"","description":"","type":"rss20","entries":[{"title":"Horror in the Horn of Africa: reflections and projections","link":"http://www.mercycorps.org/danoneill/blog/25255","author":"Dan O\u0026#39;Neill","publishedDate":"Tue, 02 Aug 2011 09:01:45 -0700","contentSnippet":"\n\t\n\tSudan, 1984. Photo: Jon Warren for Mercy Corps\t\nI first encountered extreme poverty and hunger in 1972 when I drove through ...","content":"\u003cdiv style\u003d\"width:590px\"\u003e\n\t\u003ca href\u003d

    The code looks like this:

    Code:
    <!DOCTYPE HTML">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Scaffold</title>
    
            <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
            <script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
    	
            <script type="text/javascript">
    			
    			//Initialize Google
    			google.load('feeds', '1');
    	        
    			google.setOnLoadCallback(initialize);
    			
    			function initialize() {
    				console.log('init');
    			}
    			
    			Ext.setup({
    			    onReady : function() {
    					console.log('onReady');
    			    	Ext.regModel('Article', {
    			        	fields: [
    			    	         	{name: 'title', type: 'string' },
    			    	         	{name: 'link', type: 'string'}
    			        	         ]
    			        });
    
    			    	/*
    			    	Ext.regModel('Contact', {
    			            fields: ['title', 'link']
    			        });
    					*/
    					
    			        var myFeed = {
    			            itemTpl: '<div class="contact2"><strong>{title}</strong> {link}</div>',
    
    			        	store : new Ext.data.Store({
    			                model  : 'Article',
    			                proxy : {
    			                	type: 'scripttag',
    			                	url: 'http://www.google.com/uds/Gfeeds',
    			                	extraParams: {
    			    	                context: '0',
    			    	                num: '10',
    			    	                hl: 'en',
    			    	                output: 'json',
    			    	                q: 'http://www.mercycorps.org/blog/feed',
    			    	                v: '1.0',
    			    	                nocache: '0',
    			    	                //filters: []
    			                    },
    			                    reader: {
    			                    	type: 'json',
    			                    	root: 'feed.entries'
    			                    }
    			                },
    			        		autoLoad: true,
    			        		
    			        		listeners : {
    			        			load: function(s, records, success){
    			        				//Not reached
    			        				console.log('Loaded!')
    			        			},
    			                	beforeload: function(s, operation) {
    			                		//This fires ok
    			                		console.log('before load');
    			                	}
    			        		}
    			        		
    			            })
    
    			        };
    
    
    		            new Ext.List(Ext.apply(myFeed, {
    		                floating: true,
    		                width: 350,
    		                height: 370,
    		                centered: true,
    		                modal: true,
    		                hideOnMaskTap: false
    		            })).show();
    			    }
    			});
    
            </script>
     
        </head>
    
        <body>
        </body>
    </html>
    Last edited by mobitinker; 2 Aug 2011 at 8:55 PM. Reason: Make more clear

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    7
    Vote Rating
    0
    mobitinker is on a distinguished road

      0  

    Default


    Hi again,


    I hadn't seen a reply on this and thought it might be because my post was not clear enough. I updated it to include more detail. If anyone has an idea I'd really appreciate it.


    Thanks!

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    19
    Vote Rating
    0
    samsonasu is on a distinguished road

      0  

    Default


    I don't know how that script tag proxy works, but it seems to be some kind of jsonp callback. From your raw data, google is coming back with callback('0', {json: here}); I have a feeling your reader is getting the first argument ('0') instead of the second.

    Sorry I don't know how to fix it, but I'm pretty sure that's the problem. Good luck

  4. #4
    Sencha User
    Join Date
    May 2011
    Posts
    7
    Vote Rating
    0
    mobitinker is on a distinguished road

      0  

    Default


    Awesome. Thanks for the pointer. The problem was that I was specifying a 'context' of '0' which was being sent back at the front of the response as you pointed out. When I removed that extraParam, the raw data was returned as follows. I adjusted the root for the proxy to be 'responseData.feed.entries' and all was good. Thanks!!

    stcCallback1002({"responseData": {"feed":{"feedUrl":"http://www.mercycorps.org/blog/feed","title":"Mercy Corps blogs","link":"http://www.mercycorps.org/blog.html","author":"","description":"","type":"rss20","entries":[{"title":"Update: Providing clean water to 16 drought-affected Kenyan villages","link":"http://www.mercycorps.org/rogerburks/blog/25315","author":"Roger Burks","publishedDate":"Wed, 03 Aug

Thread Participants: 1