How to set "headers" config for JsonStore?

[dbassett74]

Because I'm calling a ASP.NET Web Service, I need to specify the content-type to be json, so that it returns Json formatted response. This works great in Ext.Ajax.Request, but it seems like JsonStore ignores this:



var ds = new Ext.data.JsonStore({
url: 'service.asmx/getData'
, autoLoad: true
, headers: { 'Content-Type': 'application/json;charset=utf-8'} //This tells ASP.NET to return JSON formatted response

});
I checked in FireBug and it does not seem to be sending the headers config over. How can this be done?

[mohaaron]

Maybe you need to do this on the server side.

Try this: http://stackoverflow.com/questions/712606/problems-with-asp-net-json-webservice-response-type

[dbassett74]

What I don't like about that is that it now locks in the web service to JSON, and is not longer accessible to other clients expecting XML. I prefer to specify in the client as to which format it wants to get back. So far, using Ajax and passing in the content-type works perfectly. Why is there no option to do this in the Store classes?? Seems like an oversight. Is there anyway to get the *Store object to pass custom http headers?

[aconran]

Use an Ext.data.Store with an Ext.data.HttpProxy and Ext.data.JsonReader.

Then configure your HttpProxy with a conn configuration with a custom Ext.data.Connection defining the custom headers you'd like sent w/ each request.

[dbassett74]

I think I'm getting closer. Instead of using Store and JsonReader, I thought I could use the JsonStore which according to the documentation provides a built in JsonReader. However, I keep getting the error "reader is undefined", using the following code:



var proxy = new Ext.data.HttpProxy({
method: 'POST'
, url: 'service.asmx/getAgencyList'
, headers: { 'Content-Type': 'application/json;charset=utf-8'} //This tells ASP.NET to return JSON formatted response
});

var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
storeId: 'myStore',
proxy: proxy,
// reader configs
root: 'd',
idProperty: 'agencyId',
fields: ['agencyId', 'name']
});

var cbo = new Ext.form.ComboBox({
renderTo: 'divBody'
, valueField: 'agencyId'
, displayField: 'name'
, store: store
, mode: 'local'
, triggerAction: 'all'
, lazyRender: true
, typeAhead: true
, typeAheadDelay: 0
, selectOnFocus: true
});

proxy.doRequest();

I have verified that the correct json formatted data gets returned from the server. What am I missing here?

[tryanDLS]

Why are you calling doRequest before creating the Store (and it's reader)?

[dbassett74]

Sorry, I moved it to after the combobox, and updated my origional post, but still the same problem. I'm wondering if it has something to do with the asynchronous nature of this? For example, if the HttpProxy takes a little while to return, yet proxy.doRequest is called before, maybe that's the problem? So how do I only load the data once results have returned from proxy? I'm really stuck here and can't figure it out.

[tryanDLS]

The only thing async is the doRequest call, not proxy creation. I would suggest that you add handlers to the proxy events load and loadexception (maybe exception too). Haven't looked at this closely yet - loadexception maybe deprecated in favor of exception.

You could do the same for Store. Then set breakpoints in those handlers and see what's happening.

Also might help to post your actual JSON response.

[dbassett74]

I don't think its the Json response that's a problem, but here it is anyways:



{"d":[{"agencyId":"1","name":"Some Agency","description":"Preliminary Utility
Notice Req","street1":"2718 N. Carmelo Ave.","city":"Anytown","state":"CA","zipCode":"91107-1254"},
{"agencyId":"2","name":"Some Agency","description":"Preliminary Utility Notice
Req","street1":"2718 N. Carmelo Ave.","city":"Anytown","state":"CA","zipCode":"91107-1254"}]}


I'm really lost on this. Seems like this should be such an easy thing to accomplish, loading a combobox with Json data using an HttpProxy. Can someone please post an example for me?

[mohaaron]

This article does essentially what your looking for (except for hard coding the web service as json) but maybe it's the returning structure of the json that's your problem.

The header is being setup in the HttpProxy the way your are but the returned json is in a format that has a "d" as the root of the json structure that you have to account for.

Take a look at this: http://ziuek.blogspot.com/2009/04/extjs-and-net-webservices.html

[dbassett74]

It gives me the error:
Invalid JSON primitive: xaction.I know this is a problem in the latest RC of Ext. I think to get around it, you have to call doRequest now, but that is on the proxy, not the store. So how would I get around this using this sample?



var myStore = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
// Call web service method using GET syntax
url: 'service.asmx/getAgencyList',
// Ask for Json response
headers: { 'Content-Type': 'application/json;charset=utf-8' }
}),
// Root variable
root: 'd',
// Record identifier
id: 'agentId',
// Fields declaration
fields: ['agentId', 'name', 'description']
});

var grid = new Ext.grid.GridPanel({
// Set store
store: myStore,
// Columns definition
columns: [
{ dataIndex: 'agentId' },
{ dataIndex: 'name' },
{ dataIndex: 'description' }
],
// Render grid to dom elemnent with id set to panel
renderTo: 'divBody'

});

[mohaaron]

Try using a json checker to make sure your json is valid. I tried a number of them and in the end this one helped me the most.

http://www.raboof.com/projects/jsonchecker/

[dbassett74]

Json is not the problem. The issue was the fact that HttpProxy passes an "xaction" parameter now, so you have to delete it. But my question to the ExtJs support staff: What is "xaction" for and why is it being passed automatically, and why is there not a more elegant solution to removing it?

Here is my final working solution showing this:


function getStore() {
var store = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'service.asmx/getAgencyList',
// Ask for Json response
headers: { 'Content-Type': 'application/json;charset=utf-8' }
}),
// Root variable
root: 'd',
// Record identifier
id: 'agentId',
// Fields declaration
fields: ['agentId', 'name', 'description']
});
store.proxy.on({
beforeload: {
fn: function(proxy, params, options) {
delete params.xaction;
}
}
});
return store;
};

var grid = new Ext.grid.GridPanel({
// Set store
store: getStore(),
height: 200,
// Columns definition
columns: [
{ dataIndex: 'agentId' },
{ dataIndex: 'name' },
{ dataIndex: 'description' }
],
renderTo: 'divBody'
});

[tryanDLS]

Try configuring your proxy with the api config per this http://extjs.com/forum/showthread.php?t=67815

[dbassett74]

Same problem... It still insists on passing xaction, even though Im' using the API config. Do I have to call something other than reload() on the store in order to utilize the api config?

[tryanDLS]

You sure you're using RC2 code? I just tested this and all 3 requests were sent with no xaction


Ext.onReady(function() {
var store = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'service.asmx/getAgencyList',
// Ask for Json response
headers: { 'Content-Type': 'application/json;charset=utf-8' }
}),
// Root variable
root: 'd',
// Record identifier
id: 'agentId',
// Fields declaration
fields: ['agentId', 'name', 'description']
});

store.proxy.on({
beforeload: {
fn: function(proxy, params, options) {
debugger;
// delete params.xaction;
}
}
});
store.load();
store.load({params:{foo:'bar'}});
});

[dbassett74]

I'm pretty sure I am. I downloaded the latest code from this site and copied it into my project over the existing ext code. I even looked inside of ext-base.js and it says "Ext JS Library 3.0 RC2".

Is there anyway at run time to display what version is running to be sure?

[tryanDLS]

Well if you look at the script in Firebug, you'll see the comments w/version at the top of the file.

Did you run my code in Firebug? Do you see 3 POST requests? What do you see on the POST tab?

[dbassett74]

Ok, it turns out the ext-all-debug.js was still RC1. I guess it didn't copy over correctly. I have updated that with RC2, and now your code works for me. But, the second load statement:
store.load({params:{foo:'bar'}});


Fails with the same xaction error. So how would I also pass in parameters? Thanks again.

[tryanDLS]

Are you saying that running my code does not send 'foo=bar' and instead sends xaction? I just retested against RC1 and I see that.

Did you also verify that you're running the RC2 version of ext-base.js?

[dbassett74]

Yes, RC2 of both. But I was incorrect. It is complaining about "foo" now, not "xaction". The error is:

"Invalid JSON primitive: foo.","StackTrace":"

[tryanDLS]

Set Firebug to break on all errors and see where that's occurring. Is it happening after the response comes back?

[umarkashmiri]

Hi,
Yes aconran is right use http dataproxy along with json store and it will definitely work