problem with JsonStore and JsonReader - extjs

Question

In my ExtJS application I use EditorGridPanel to show data from server.
var applicationsGrid = new Ext.grid.EditorGridPanel({
region: 'west',
layout: 'fit',
title: '<img src="../../Content/img/app.png" /> Приложения',
collapsible: true,
margins: '0 0 5 5',
split: true,
width: '30%',
listeners: { 'viewready': { fn: function() { applicationsGridStatusBar.setText('Приложений: ' + applicationsStore.getTotalCount()); } } },
store: applicationsStore,
loadMask: { msg: 'Загрузка...' },
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: { 'rowselect': { fn: applicationsGrid_onRowSelect} }
}),
viewConfig: { forceFit: true },
tbar: [{
icon: '../../Content/img/add.gif',
text: 'Добавить'
}, '-', {
icon: '../../Content/img/delete.gif',
text: 'Удалить'
}, '-'],
bbar: applicationsGridStatusBar,
columns: [{
header: 'Приложения',
dataIndex: 'ApplicationName',
tooltip: 'Наименование приложения',
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: '<img src="../../Content/img/user.png" />',
dataIndex: 'UsersCount',
align: 'center',
fixed: true,
width: 50,
tooltip: 'Количество пользователей приложения',
sortable: true
}, {
header: '<img src="../../Content/img/role.gif" />',
dataIndex: 'RolesCount',
align: 'center',
fixed: true,
width: 50,
tooltip: 'Количество ролей приложения',
sortable: true}]
});
When I use JsonStore without reader it works, but when I try to update any field it uses my 'create' url instead of 'update'.
var applicationsStore = new Ext.data.JsonStore({
root: 'applications',
totalProperty: 'total',
idProperty: 'ApplicationId',
messageProperty: 'message',
fields: [{ name: 'ApplicationId' }, { name: 'ApplicationName', allowBlank: false }, { name: 'UsersCount', allowBlank: false }, { name: 'RolesCount', allowBlank: false}],
id: 'app1234',
proxy: new Ext.data.HttpProxy({
api: {
create: '/api/applications/getapplicationslist1',
read: '/api/applications/getapplicationslist',
update: '/api/applications/getapplicationslist2',
destroy: '/api/applications/getapplicationslist3'
}
}),
autoSave: true,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
});
I believe that the problem is that I don't use reader, but when I use JsonReader grid stops showing any data at all.
var applicationReader = new Ext.data.JsonReader({
root: 'applications',
totalProperty: 'total',
idProperty: 'ApplicationId',
messageProperty: 'message',
fields: [{ name: 'ApplicationId' }, { name: 'ApplicationName', allowBlank: false }, { name: 'UsersCount', allowBlank: false }, { name: 'RolesCount', allowBlank: false}]
});
var applicationsStore = new Ext.data.JsonStore({
id: 'app1234',
proxy: new Ext.data.HttpProxy({
api: {
create: '/api/applications/getapplicationslist1',
read: '/api/applications/getapplicationslist',
update: '/api/applications/getapplicationslist2',
destroy: '/api/applications/getapplicationslist3'
}
}),
reader: applicationReader,
autoSave: true,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
});
So, does anyone know what the problem might be and how to solve it. The data returned from my server is Json-formated and seams to be ok
{"message":"test","total":2,"applications":[{"ApplicationId":"f82dc920-17e7-45b5-98ab-03416fdf52b2","ApplicationName":"Archivist","UsersCount":6,"RolesCount":3},{"ApplicationId":"054e2e78-e15f-4609-a9b2-81c04aa570c8","ApplicationName":"Test","UsersCount":1,"RolesCount":0}]}

Answer 1

I had the same problem.. I solved it establishing Success Property in the json store and returning success true in the response from my create Method.. here is my code. Hope it helps
var EStore = new Ext.data.JsonStore
({
api: { read: 'getAssignedJobs',
create: 'createAssignedJobs',
update: 'updateAssignedJobs',
destroy: 'destroyAssignedJobs'},
root: 'jobData',
idProperty: 'Id',
autoSave: false,
autoLoad: true,
batch: true,
successProperty: 'success',
writer: new Ext.data.JsonWriter({ encode: true, writeAllFields: true }),
fields: [
{ name: 'Id', type: 'int', mapping: 'Id' },
{ name: 'ResourceId', type: 'int', mapping: 'fitter_id' },
{ name: 'StartDate', type: 'date', dateFormat: "Y-m-d\\TH:i:s" },
{ name: 'EndDate', type: 'date', dateFormat: "Y-m-d\\TH:i:s" },
{ name: 'status', type: 'int' },
{ name: 'job_id', type: 'int' }
]
});
and this is my Create method from Server Side..
public JsonResult createAssignedJobs(string jobData)
{
var Jsondata = (JobfitterToScheduler)new JavaScriptSerializer().Deserialize<JobfitterToScheduler>(jobData);
JobToFitterRepo jobtofitter = new JobToFitterRepo();
if (Jsondata != null)
{
jobtofitter.insertJobToFitter(13, Jsondata.fitter_id, 0, DateTime.Now, DateTime.Now);
return this.Json(new { success = true, jobData = Jsondata });
}
return null;
}

Answer 2

Looking at the source for Ext.data.Api I would say that the verbs are screwed up:
restActions : {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE'
},
For me the create should be a PUT and the update should be a POST. But I guess the Sencha guys have a different idea.
Btw, the source is taken from Ext 3.3.1
I guess you could override the restActions object to work as you would expect:
Ext.data.Api.restActions = {
create : 'PUT',
read : 'GET',
update : 'POST',
destroy : 'DELETE' };

Answer 3

As I've managed to know the Store 'id' config option is depricated.

Answer 4

I think the JsonStore keys off the record id on whether to do a POST vs PUT. So if the id is non-user generated the it will issue a POST, and a PUT otherwise. I am referring to record.id not record.data.id.

Answer 5

Not sure about the first part (my stores make the correct calls with similar code) but I can shed light on the 2nd part of your question.
Ext.data.JsonStore does NOT accept a reader object - it only takes fields and always makes its own reader, as you can see from the source
Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
constructor: function(config){
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});
and is confirmed as being "as per docs" in Ext 2.x
http://www.sencha.com/forum/showthread.php?57189-2.x-Closed-Bug-in-Ext.data.JsonStore-cconstructor
So if you supply your own reader you must, in this case, make an Ext.data.Store instead (this caught me out too)