Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: JSON Not Loading At All

  1. #1
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    7
      0  

    Default JSON Not Loading At All

    Hello,

    I've waded through countless examples of getting JSON data into a panel but I simply can't get the data loaded. I'm not getting errors and everything else loads/functions fine. So it must be something really simple. Any help at all would be greatly appreciated.

    My folder structure looks like this:

    MyProject
    -index.html
    -js
    --application.js
    --data.js
    --items.json

    So the index.html file is in the root and all .js files are in the "js" folder.

    My application.js file:

    Code:
    ApplicationName = new Ext.Application({
    	name: "ApplicationName",
    	launch: function() {
    		
    		// ITEMS
    		//------------------------------------------------------------
    		ApplicationName.ItemsDetails = new Ext.Panel({
    			id: 'items_details',
    			tpl: '<div id="DetailsPanel">You’re viewing details for: <strong>{itemName}</strong></div>',
    			dockedItems: [{
    				xtype: 'toolbar',
    				items: [{
    					text: 'Items',
    					ui: 'back',
    					handler: function() {
    						ApplicationName.ItemsWrapper.setActiveItem('items_panel', {type:'slide', direction:'right'});
    					}
    				}]
    			}]
    		});
    		ApplicationName.ItemsPanel = new Ext.Panel({
    			id: 'items_panel',
    			layout: 'fit',
    			items: [
    				new Ext.List({
    					store: ApplicationName.StoreItems,
    					itemTpl: '{itemName} ({dataCount})',
    					grouped: true,
    					onItemDisclosure: function(record) {
    						var name = record.data.itemName;
    						ApplicationName.ItemsDetails.dockedItems.items[0].setTitle(name);
    						ApplicationName.ItemsDetails.update(record.data);
    						ApplicationName.ItemsWrapper.setActiveItem('items_details', {type:'slide', direction:'left'});
    					}
    				})
    			],
    			dockedItems: [{
    				xtype: 'toolbar',
    				title: 'Items',
    				items: [{
    					text: 'Home',
    					ui: 'back',
    					handler: function() {
    						ApplicationName.Viewport.setActiveItem('panel_dashboard', {type:'slide', direction:'right'});
    					}
    				}]
    			}]
    		});
    		ApplicationName.ItemsWrapper = new Ext.Panel({
    			id: 'wrapper_items',
    			title: 'Items',
    			iconCls: 'IconItems',
    			layout: 'card',
    			items: [ApplicationName.ItemsPanel,ApplicationName.ItemsDetails]
    		});
    		
    		// MAIN VIEWPORT
    		//------------------------------------------------------------
    		ApplicationName.Viewport = new Ext.TabPanel({
    			tabBar: {
    				dock: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
    			defaults: {
    				scroll: 'vertical'
    			},
    			fullscreen: true,
    			layout: 'card',
    			cardSwitchAnimation: 'fade',
    			items: [ApplicationName.ItemsWrapper]
    		});
    		
    	}
    });
    My data.js file:

    Code:
    Ext.regModel('Items', {
    	fields: ['itemName', 'dataCount']
    });
    
    PriceBox.StoreItems = new Ext.data.Store({
    	model: 'Items',
    	proxy: {
    		type: 'ajax',
    		url : 'js/items.json',
    		reader: {
    			type: 'json'
    		}
    	},
    	sorters: 'itemName',
    	getGroupString : function(record) {
    		return record.get('itemName')[0];
    	}
    });
    My items.json file:

    Code:
    [{"itemName": "Airport","dataCount": 3},{"itemName": "Air Hog","dataCount": 3},{"itemName": "Ankle Socks","dataCount": 3},{"itemName": "Asparagus","dataCount": 3},{"itemName": "At-Ats","dataCount": 3},{"itemName": "Avengers","dataCount": 3},{"itemName": "Bananas","dataCount": 3},{"itemName": "Belkin","dataCount": 3},{"itemName": "Bears","dataCount": 3},{"itemName": "Burgundy","dataCount": 3},{"itemName": "Bye","dataCount": 3},{"itemName": "Cat","dataCount": 3},{"itemName": "Cantalope","dataCount": 3},{"itemName": "Cobble","dataCount": 3}]
    I have referenced the following documentation (in addition to analyzing the kitchen-sink files):

    http://www.sencha.com/blog/using-the...n-sencha-touch
    http://dev.sencha.com/deploy/touch/d...sonReader.html
    http://dev.sencha.com/deploy/touch/d....DataView.html
    http://dev.sencha.com/deploy/touch/d...ta.Reader.html

    Based on that I believe my setup is right. So, again, it's likely something small. Everything in the list panel loads fine but when the details panel loads there's no data or even an error. Yet the toolbar and tabpanel tabs load fine in that details panel.

    I would LOVE for anyone to point out something that looks amiss.

    Thanks in advance!
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  2. #2
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
      0  

    Default

    Lets narrow it down first: is it loading into your store ok?
    Check by opening the chrome JS console and typing:

    PriceBox.StoreItems.data.items[0].get('itemName')

    or

    PriceBox.StoreItems.data.items

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    7
      0  

    Default

    Thanks, Chris! I wasn't aware of using the console to debug like this. Here's what the results of those are:

    Code:
    PriceBox.StoreItems.data.items[0].get('itemName')
    TypeError: Result of expression 'PriceBox.StoreItems.data.items[0]' [undefined] is not an object.
    
    PriceBox.StoreItems.data.items
    []
    So it looks like the data isn't even loading into my store. Am I missing a load function somewhere?
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  4. #4
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
      0  

    Default

    Yeah the console is great, you should use it as much as possible.
    In your console, you can try this and see if it helps:

    PriceBox.StoreItems.load()

    If that helps, put it in your code somewhere.
    You could also make your store 'autoLoad' i believe but i haven't tried.

  5. #5
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    7
      0  

    Default

    Hmmthat changed things, but it still isn't working. If I type that in the console I get the "loading" animation. And if I add autoload to my store I get the same results:

    Code:
    PriceBox.StoreItems = new Ext.data.Store({
    	model: 'Items',
    	proxy: {
    		type: 'ajax',
    		url : 'js/items.json',
    		reader: {
    			type: 'json'
    		}
    	},
        autoLoad: true
    });
    It appears autoLoad is important, but it's still not loading that data because the spinner overlay never subsides and reveals the data.

    Thoughts?
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  6. #6
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
      0  

    Default

    So, after you call load(), what does 'mystore.data.items' return? Just an empty list?
    If so, thats good! We've narrowed down your problem to the store.
    Having said that, i can't pick any problems with your code, it looks fine to me.
    Any errors appearing in the chrome javascript console?

  7. #7
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    7
      0  

    Default

    I was actually using Safari's console. Chrome's console throws a completely different error.

    When loading my app after I added autoLoad Chrome's console notes:

    Code:
    XMLHttpRequest cannot load file:///path/to/project/www/js/items.json?_dc=1300231945149&limit=25. Origin null is not allowed by Access-Control-Allow-Origin.
    Then it notes:

    Code:
    Uncaught TypeError: Cannot read property 'length' of undefined
    sencha-touch-debug.js:7209
    Safari's console notes:

    Code:
    TypeError: Result of expression 'records' [undefined] is not an object.
    sencha-touch-debug.js:7209
    And, yeah, I thought the code looked fine. I've analyzed it many times to see what might be missing.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  8. #8
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
      0  

    Default

    The 'file://' in one of those errors leads me to think you're not accessing this from a web server, instead you're just opening the local html file in your browser.

    Put it in a web server and see what difference it makes.

    Cheers

  9. #9
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    7
      0  

    Default

    Yeah, these are local files. I have the directory set up as a vhost so I can load it that way, but I wasn't doing that because I didn't know the JSON calls would require it to reside in a server environment. Specifically because when the app is loaded onto a device it won't be on a server. Is that the problem?

    When I access the same files as a vhost I get a completely different error. In fact, it gets worse because the panel that shows the list doesn't even load in that scenario.

    Chrome's console reports:

    Code:
    Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
    sencha-touch-debug.js:23405
    Safari's console reports:

    Code:
    TypeError: Result of expression 'group.name' [undefined] is not an object.
    sencha-touch-debug.js:23405
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  10. #10
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
      0  

    Default

    I think you're getting further now, which is good.
    I think your problem is your group function, try changing it to this:

    return record.get('itemName').substr(0,1);

Page 1 of 2 12 LastLast

Similar Threads

  1. Json data not loading from URL
    By dukeyboy in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 4 Mar 2011, 4:26 AM
  2. JSON Store isn't loading JSON Data
    By WhirlingDerBing in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 3 Nov 2009, 4:37 PM
  3. loading a var with json via ajax?
    By extjsF4n in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 21 May 2008, 5:10 PM
  4. Loading a tree from JSON
    By aberezin in forum Community Discussion
    Replies: 1
    Last Post: 4 May 2008, 9:02 AM

Tags for this Thread

Posting Permissions

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