We Keep Coding

ExtJS GET action to store returns 500 in FireFox

I'm getting the strangest behavior from FireFox when loading data from a Web API GET request whereas other browsers do this perfectly. Here is what Fiddler can tell me when I use Firefox:
3817 500 HTTP localhost:52543 /api/Tasks/Get?_dc=1442848131483&page=1&start=0&limit=25 5 403 private application/xml; charset=utf-8 firefox:138020
Same action, other browser (Chrome):
3954 200 HTTP localhost:52543 /api/Tasks/Get?_dc=1442848159073&page=1&start=0&limit=25 1 508 no-cache; Expires: -1 application/json; charset=utf-8 chrome:2808
I'm unable to catch the error in the Application_Error, nor do I receive errors in the exception listener on the client-side, so I suspect something is going wrong between returning the result to the client and the client processing the results, but I have no clue at all where the problem might be situated.
Here is the store definition:
Ext.define('SchedulerApp.store.UnplannedTaskStore', {
extend: 'Ext.data.Store',
model: 'UnplannedTask',
autosync: false,
autoLoad: true,
proxy: {
type: 'rest',
api: {
read: '/api/Tasks/Get',
add: '/api/Tasks/Add',
update: '/api/Tasks/Update',
destroy: '/api/Tasks/Destroy'
},
actionMethods: {
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
},
writer: {
type: 'json',
writeAllFields: true
}
},
listeners: {
load: function (sender, node, records) {
},
exception: function (proxy, response, options) {
Ext.MessageBox.alert('Error', response.status + ": " + response.statusText);
}
}
});
and the model:
Ext.define('UnplannedTask', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Importance', type: 'float' },
{ name: 'Category', type: 'string' },
{ name: 'TaskNo', type: 'float' }
]
});
This is what I have in the Web API:
[System.Web.Http.HttpGet]
public async Task<dynamic> Get(string page, string start, string limit)
{
// Get items from database with request information from the Kendo Grid Control
PagingResult<TaskViewModel> tasks = await this.Worker.GetPagedTasksAsync(int.Parse(page), int.Parse(limit), null, null);
// Map them to store objects
var convertedTasks = new SchedulerTasksViewModel()
{
total = tasks.Count,
data = tasks.Items.Select(x => new SchedulerTask()
{
Importance = x.Importance,
Category = x.Category,
TaskNo = x.TaskNumber
}).ToArray()
};
var response = Request.CreateResponse(HttpStatusCode.OK, convertedTasks);
return response;
}
Could it be a browser issue or am I missing something on the server side?

Try adding this header to your proxy:
headers: {'Content-Type': "application/json" }

I would like to elaborate a bit. The error is thrown by the XML serializer; you don't see the details because IIS does not send them to the front.
I would recommend to modify all your API calls such that they work with XML as well - even if your front-end does not use XML. It's far easier to debug if you can just open API calls in new browser tabs and the XML serializer does not mask code errors with serialization errors.
To see the error message, you would have to allow your development IIS to bring errors to the front:
Open the IIS7 manager
Select the Website and on its features view, double click on “Error Pages”.
Right click and select the “Edit Feature Settings…” or select the same from the Actions pane (in the right hand side)
Select the “Detailed errors” radio button and click on OK
(Source)
My best guess is that you just have to decorate some types or properties with [DataContract], [DataContractAttribute] or [DataMemberAttribute]. The error message will tell you which ones and how to decorate.
Another thing entirely: If you use more than one Ajax request, I'd recommend to define an override on the Ajax proxy. That way you can't forget one:
Ext.define("MyApp.override.Ajax", {
override:'Ext.data.proxy.Ajax',
headers:{'Accept':'application/json'}
});

ExtJs Dynamic Store Failed call Handle

I have a clasic store
Ext.define('xxx.store.Search', {
extend: 'Ext.data.Store',
model: 'xxx.model.Search',
requires: ['xxx.data.xxxx'],
proxy:
{
type: 'xxxxx',
digSearchUrl: {
initRequest: 'ajax/xxx/xxx/xx',
pollRequest: 'ajax/xxxx/xxxx/xxxxxx'
}
},
autoLoad: false,
defaultSortDirection: 'DESC'
});
Now i usually do a store load like this:
this.getStore('Search').load({
digSearchCfg: {
xxx: sid,
xxx: xxxx
}
});
I know i could use the standard approch like in here:
Attempting to load Ext store with JSON data from AJAX request returns error
But i would rather define the error handler in the store it self. is that possible?

If you would like to catch and handle the Ajax request exceptions yourself just add a Exception listener to the Ajax proxy, like so:
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json',
rootProperty: 'characters'
},
listeners: {
exception: function(proxy, response, operation, eOpts ) {
console.log("EXCEPTION CAUGHT!");
}
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
You can see a demo fiddle here. data1.json will work and will log the store object to console. data2.json will log 'EXCEPTION CAUGHT!' to the console.
Here is the documentation for the Ajax proxy for reference.

Sending parameters in ExtJS 4.1

This is my code:
Ext.define('gridOptionsModel', {
extend: 'Ext.data.Model'
});
var gridOptionsStore = Ext.create('Ext.data.JsonStore', {
autoDestroy: true,
model: 'gridOptionsModel',
proxy: {
type: 'ajax',
actionMethods: 'POST',
url: '/application.php?way=system&case=updateFields41',
extraParams: {meta: 'true'},
reader: {
type: 'json',
root: 'gridoptions'
}
}
});
And this is the part where it reloads the data from the url but does not send the desired parameters
gridOptionsStore.load({proxy: {
extraParams: {gridData: grid.getState()}}
});
I have tried everything possible but cannot made it to POST the gridData parameter.

you can add the extra param before the load.
gridOptionsStore.getProxy().extraParams.gridData = grid.getState();
gridOptionsStore.load();
This works for me.

instead of setting a property directly, use a method when available:
gridOptionsStore.getProxy().setExtraParam('gridData', grid.getState());

EXT JS Store's Proxy: readers and writers

In the documentation, i have found a store instantiated like this:
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: "User",
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
The proxy has one url config. I am particularly interested in the reader. The reader specifies the data exchange format (json) and the root ('users'). Now, in other words if the store is set up to be: autoLoad = true, then EXT JS will make an Ajax connection to the url specified in order to read. Now, how would i configure a writer for that same store above? Someone also tell me about this: if i configure a writer, would it use the same url as specified in the proxy? am still confused about writers and readers in context of the code i have showed above, you would help me use the above example to show readers and writer configs. Thank you.

Here is an example of a store with reader, writer and api in my App:
Ext.define('MyApp.store.Tasks', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Task',
sorters : [{
property: 'idx',
direction: 'ASC'
}],
autoSync:true,
proxy:{
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
writeAllFields : false, //just send changed fields
allowSingle :false //always wrap in an array
// nameProperty: 'mapping'
},
api: {
// read:
create: 'task/bulkCreate.json',
update: 'task/bulkUpdate.json'
// destroy:
}
},
listeners : {
write: function(store, operation, opts){
console.log('wrote!');
//workaround to sync up store records with just completed operation
Ext.each(operation.records, function(record){
if (record.dirty) {
record.commit();
}
});
},
update:function(){
console.log('tasks store updated');
}
}
});

Actually you are correct - it will use the same url as for reader.
Proxy is a mediator between your model/store on a client and your server code on another side.
Readers are used for reading data and you could configure stuff like formatting, specify root etc. Writers are in charge of save/update requests to the server.
Check this article: http://edspencer.net/2011/02/proxies-extjs-4.html

Extjs4: TreeStore with method POST

I have a Ext.tree.Panel and define in it I have a store. I want to be able to update the store via ajax along with POST params.
Here is my tree definition:
var mytree = Ext.create('Ext.tree.Panel',{
rootVisible:false,
store:Ext.create('Ext.data.TreeStore', {
root:{
id:'rootnode',
nodeType:'async'
},
proxy:{
method:'post',
type:'ajax',
url:'myurl'
}
})
});
And I try and reload the store as follows:
mytree.store.load({params:{search_string='value'}})
But the store attempts to reload with the params as GET Parameters.
Some help would be greatly appreciated. The ExtJS 4 Docs arent great at the moment (in my opinion)

There is actionMethods parameter in proxy to specify method of requests: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.data.proxy.Ajax.html
proxy:{
actionMethods: {
create: 'POST',
destroy: 'DELETE',
read: 'POST',
update: 'POST'
},
type:'ajax',
url:'myurl'
}