PDA

View Full Version : Problem with JSON Data Store



dan.cook
28 Jun 2010, 6:26 AM
I am using Ext Designer in Trial Mode, with a view to buy it if I can get this one problem sorted out.

I am trying to load data from a JSON array provided by a php backend. I have tried setting the URL Prefix and made sure I have the correct url. The url is displayed with the Error Message : "Unable to load data with the supplied configuration".

I downloaded this test json data from somewhere on the forums here :



{
"Example": [
{"id":1, "val":"1"},
{"id":2, "val":"3"},
{"id":3, "val":"1"},
{"id":4, "val":"1"},
{"id":5, "val":"1"}
]
}
Even using this data I am unable to load the JSON store. My file is located at http://wacnts02/web/condeco/jsontest.js. I have used http://wacnts02/web/condeco/ as the URL prefix and then used root:Example url:jsontest.js with no luck.

The link that is displayed with the error, opens instantly in my web browser.

If anyone has some advice it would be greatly appreciated.

jarrednicholls
28 Jun 2010, 6:34 AM
Hi dan.cook,

Can you attach your project (.xds) file? I will be able to diagnose it from there for you.

Thanks.

dan.cook
28 Jun 2010, 6:55 AM
Thanks jarred

jarrednicholls
28 Jun 2010, 7:28 AM
No problem. Looks like you need to add field definitions to your store. Right-click on the store and go to "Quick add" and add 2 new fields, then give them the names "id" and "val" respectively. We're planning to add a feature that will auto-configure a store based on returned data, but for now you need to define your store 100% just as if you were programming the javascript by hand.

Thanks.

dan.cook
28 Jun 2010, 8:11 AM
Thanks jarred, I have tried your solution but I still can't get it to work.

I have attached the new project file.

jarrednicholls
28 Jun 2010, 8:26 AM
Hey Dan,

Do you have a proxy configuration setup by chance? If so, the default whitelist is all private subnets (class A, B, and C), localhost, and 127.0.0.1. Any other host will attempt to route the traffic through your proxy server, and that will break in a lot of environments as the proxy server doesn't understand local/internal hosts or IPs. So if wacnts02 resolves to "192.168.x.x" (or a class A/B IP) then use the IP instead as it's a part of the default internal whitelist. Editing the whitelist is a feature coming up soon.

If that's not the case, I can look into it further - because at first glance your project file looks just fine and I'm loading your sample data from my own machine, no problems.

Thanks.

dan.cook
28 Jun 2010, 9:54 AM
Ahh..... that makes sense, I do have a proxy set up. I assume the only way around this is to install the designer on the web sever, which wont be a problem but is not ideal.

Thanks for you help.
Dan

jarrednicholls
28 Jun 2010, 11:31 AM
You bet. If wacnts02 resolves to a private IP, you can use the IP instead (unless the web server has particular host headers setup of course). You can alternatively change your hosts file (/etc/hosts in *nix, C:\Windows\System32\drivers\etc\hosts in Windows) to have localhost point to the IP of wacnts02 if the IP is not a private IP and host headers aren't used. I'm glad your last resort is not a problem (though not ideal), and I can say that custom whitelisting will absolutely be added in the near future...so your installation on the web server would be temporary at least.

dan.cook
29 Jun 2010, 5:02 AM
Thanks, I have now installed ext designer on my server and got the JSON populated.

I didnt know whether to start another thread for this or not, but as its related to the JSON store (ish) I will continue here.

JSON store is loaded and I have set autoLoad on it. I am now trying to add a refresh button, so I added a toolbar to my grid and a button. I spent most of the morning looking for how and where to reference functions for events. I finally found a post here mentioning the autoRef property and I have got a bit further. However I cannot seem to call the function for my JSON store.




MyWindow = Ext.extend(MyWindowUi, {
initComponent: function() {
MyWindow.superclass.initComponent.call(this);
this.refreshBtn.on('click', this.onRefresh, this);
},

onRefresh : function() {
MyStore.superclass.load();
}


});



MyStore.load() throws an error "Cant find function MyStore.load"
MyStore.superclass.load() throws as error inside ext-debug "me.events is undefined - ext-all-debug.js - Line 1459"

Is there a manual or guide for ext designer? I have found http://www.sencha.com/products/designer/ExtDesignerGettingStarted.pdf but this doesn't provide nearly enough information for how to use the designer.

jarrednicholls
29 Jun 2010, 9:52 AM
Hey Dan,

Yeah I understand, that guide was very much geared toward getting introduced to the Designer software and the life cycle one can expect, but a working knowledge of Ext JS in general is required in order to "continue past a project export", which is where the Designer basically leaves off in its utility. We definitely need and will provide more working examples from "soup to nuts". With that said, we're continually improving the Designer so that more of your dev time is spent in the Designer and really truly only leave the business logic and behavior implementation outside of the Designer.

So to actually answer your question... :-)

"MyStore" is your store's class, but not the instance of that class...so you can't call methods on it directly like that. It looks like your main component is a Window...you have a GridPanel inside of the Window with an autoRef set, is that right? If so, let's say the autoRef is "myGrid", you would do something along these lines:



MyWindow = Ext.extend(MyWindowUi, {
initComponent: function() {
MyWindow.superclass.initComponent.call(this);
this.refreshBtn.on('click', this.onRefresh, this);
},

onRefresh : function() {
this.myGrid.getStore().load();
}
});


Your button's click registration is perfect. The store is accessed through the component to which it's attached. This is probably the easiest way to access the instance of the store in the context of onRefresh()...the GridPanel is attaching to the store using its "storeId" which is registered with the Ext.StoreMgr. Though, you could actually use the Ext.StoreMgr to get the store using its storeId:



MyWindow = Ext.extend(MyWindowUi, {
initComponent: function() {
MyWindow.superclass.initComponent.call(this);
this.refreshBtn.on('click', this.onRefresh, this);
},

onRefresh : function() {
Ext.StoreMgr.get('MyStore').load();
}
});


Hope that helps!

dan.cook
30 Jun 2010, 12:20 AM
Thanks Jarred, I have done small projects in ext before but I was struggling trying to work out the class / object / instance structure created by the designer. Now you have explained that I was trying to treat a class like an instance I understand.

Thanks
Dan