PDA

View Full Version : [RESOLVED] JsonStore CRUD doesn't work, looking for working examples



markjlyon
16 Aug 2010, 8:50 AM
Hi Everyone,

I can't find a single working example of a JsonStore using CRUD for remote data. There are no examples included with ExtJS that use remote data, so please don't just try to brush me off and point me to the ExtJS examples.

I am very surprised there are no working examples because it means no one is able to use ExtJS for CRUD bases data applications, just read only applications.

I am using ASP.Net to provide Json data for the Read operation and it works perfectly for ExtJS and other Json consumers so I am sure it isn't my server side Json provider.

I have tried url plus api, HttpProxy, ScriptTagProxy, store.save, store.update, store.refreshData, etc. but nothing ever fires off an event to Create, Update, or Delete anything if the JsonStore uses remote data. Strangely, it works if and only if the data is hardcoded in a js file.

Everything works perfectly for reading the data.

Everything works perfectly for adding a row to the store and refreshing the grid.

Nothing causes the store or grid to update or fire any associated events.

Can someone please post a working example of all JsonStore CRUD operations (or at least update) to ASP.Net or PHP remote data?

Thanks,

Mark

markjlyon
16 Aug 2010, 11:35 AM
I have now determined that this must be either a bug or the ability to add, update, and delete data using web services hasn't actually been implemented in ExtJS for the JsonStore and JsonWriter.

I have posted this under the bug section now.

Thanks,

Mark

Animal
16 Aug 2010, 1:49 PM
How have you debugged before deciding to post a bug report?

(And trying an infinite number of random configurations is not debugging)

Animal
16 Aug 2010, 1:50 PM
Working example: http://dev.sencha.com/deploy/dev/examples/writer/writer.html

markjlyon
17 Aug 2010, 4:45 AM
Yes, Animal, I debugged using Firebug before I posted it as a bug.

I am running the writer.html from IIS 7 and Apache. No dice.

Both the writer.html example and my own code generate the same error.

I am submitting the create manually by use of the store.save() method.

The error occurs in the JsonStore and not the JsonWriter.

I have tried sending the ID field empty and with a value.
I have tried using "id" and "ID" and "Id" and "iD" as the name of the field.
I have tried it with and without using the idProperty=(tried all the above case spellings).
I have tried it with and without a declared JsonReader and JsonWriter (all four combinations).

POST:


{"priorities":{"ID":0,"Priority":7,"Ticket":"99999999","IncidentDes":"Incident Description"}}


STATUS:

200 OK

RESPONSE:


{success: true,message: "Insert successful","priorities":
[{"ID":99,"Priority":7,"Ticket":"99999999","IncidentDes":"Incident Description"}]}


ERROR:


communication error

Animal
17 Aug 2010, 5:37 AM
You set a breakpoint in the Store's callback (the line highlighted in red), and watched what it did with the returned data?




createCallback : function(action, rs, batch) {
var actions = Ext.data.Api.actions;
return (action == 'read') ? this.loadRecords : function(data, response, success) {
// calls: onCreateRecords | onUpdateRecords | onDestroyRecords
this['on' + Ext.util.Format.capitalize(action) + 'Records'](success, rs, [].concat(data));
// If success === false here, exception will have been called in DataProxy
if (success === true) {
this.fireEvent('write', this, action, data, response, rs);
}
this.removeFromBatch(batch, action, data);
};
},

Animal
17 Aug 2010, 5:39 AM
Y
I have tried sending the ID field empty and with a value.
I have tried using "id" and "ID" and "Id" and "iD" as the name of the field.
I have tried it with and without using the idProperty=(tried all the above case spellings).
I have tried it with and without a declared JsonReader and JsonWriter (all four combinations)

That's not debugging, that's casting spells. This is not magic.

markjlyon
17 Aug 2010, 6:26 AM
Yes, Animal, I did debug the callback and it is never reached. Only the exception is executed with the "communication error" message. So the exception cancels the event bubble before it ever reaches the callback.

The reason I listed the different actions I took is because posts in this very forum present solutions that the idProperty declaration, the ID field with its spellings and values, and the existence or lack thereof of JsonReader and JsonWriter are the fix for this issue. I listed them so that people would not give those posts as the solution to this problem.

But to insult me for thinking ahead by saying I am casting spells and magic? Strange, what you consider productive or effective communication.

Again, what would help most would be an example of something that works. Writer.html doesn't. I stated in my original post that since the ExtJS examples don't work, don't suggest them.

Also, the inclusion of examples for the expected Json POST and RESPONSE for each CRUD operation would be helpful since there are no working examples of those.

Animal
17 Aug 2010, 6:30 AM
http://dev.sencha.com/deploy/dev/examples/writer/writer.html works

You can actually watch it working!

If it's not getting t your callback, then you have other problems. You're not trying cross-domain are you?

markjlyon
17 Aug 2010, 7:16 AM
I am within the same domain and I even tried ScriptTagProxy in case I didn't understand what ExtJS defined as cross-domain. Apparently I do understand and it isn't the problem.

I concur that you can see writer.html working on the ExtJS site, but I can't get ANY JsonStore to do anything but Read, unless the data is hardcoded into a js file and used with the data property. So the site example must be different from the zip example. Since I can't download the PHP from their web server (server side script), I am stuck with the zip code that doesn't work. Firebug tells me that the POST and RESPONSE from the site writer.html example is what I would reasonably expect to see and functionally identical to my own POST and RESPONSE samples. So I am sure my Json and server response is correct.

As an update, I added listeners for ALL JsonStore, JsonReader, and JsonWriter events. The last callback that occurs before the exception event is the save event.

No event occurs after the exception event.

Animal
17 Aug 2010, 9:19 AM
Post a screenshot of the JSON response from your server

codeart.ch
17 Aug 2010, 10:21 AM
I had this "CRUD" problem before a while too.
But I hadn't enough time to debug it, so i just using the Ext.data.Store with Json and it works fine for me.

markjlyon
17 Aug 2010, 10:31 AM
Here is the response I am getting from the server.

21996

markjlyon
17 Aug 2010, 11:03 AM
I think my mistake is assuming that the HttpProxy{api{read,create,update,destroy}} is a standardized CRUD process built into ExtJS to save the developer from having to manually write AJAX callbacks for all CRUD operations.

HttpProxy{api{read,create,update,destroy}} clearly does not perform anything but the read operation successfully. Why it includes the other operations escapes me, but my testing shows that it is clearly incapable of doing anything but the reads because the other operations always return errors. Maybe they are placeholders for future functionality in some upcoming release?

This would explain why no examples exist for a JsonStore using HttpProxy{api{read,create,update,destroy}} and why everyone manually creates each CRUD operation as an AJAX callback in all working JsonStore examples.

With the exception of the read operation which works as documented.

Animal
17 Aug 2010, 11:50 AM
No. That's EXACTLY what the Proxy does. It performs C,R,U and D without the developer having to do anything.

I have used it in apps, as have many others.

Animal
17 Aug 2010, 11:51 AM
Of course nobody has seen your mysterious code, so nobody knows what you are really doing.

markjlyon
17 Aug 2010, 12:41 PM
Nothing mysterious here.

Here is my code:

Ext.onReady(function() {
var crmgrid = new Ext.grid.GridPanel({
renderTo: 'divgrid',
height:600,
width:600,
id: 'gridCRMPriorities',
viewConfig: {
forceFit: true
},
border: false,
loadMask: true,
sortable: false,
store: crmstore = new Ext.data.JsonStore({
root: 'crm_properties',
idProperty: 'id',
totalProperty: 'totalRows',
successProperty: 'success',
root: 'crm_priorities',
messageProperty: 'message',
listful: true,
fields: [
{name: 'id'},
{name: 'Priority'},
{name: 'Ticket'},
{name: 'IncidentDes'}
],
proxy: crmproxy = new Ext.data.HttpProxy({
api: {
read: 'JsonStore.aspx?store=query_crm_priorities',
create: 'JsonStore.aspx?store=query_crm_priorities&action=C',
update: 'JsonStore.aspx?store=query_crm_priorities&action=U',
destroy: 'JsonStore.aspx?store=query_crm_priorities&action=D'
},
method: 'POST' /* Presence makes no discernable difference */
}),
writer: crmwriter = new Ext.data.JsonWriter({
encode: false
}),
autoLoad: true,
autoSave: false,
remoteSort: true,
listeners: {
exception: function(proxy,type,action,options,res) {
Ext.Msg.show({
title: 'Exception',
msg: res.statusText,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}),
plugins: [
crmeditor = new Ext.ux.grid.RowEditor({
saveText: 'Save',
errorText: 'You must enter a Ticket and Description',
listeners: {
afteredit: function() { crmstore.save(); },
canceledit: function() { crmstore.removeAt(0); }
}
})
],
columns: [
{ id: 'crm_priorities', header: 'ID', hidden: true, dataIndex: 'id' },
{ header: "#", width: 30, align: 'right', fixed: true, sortable: false, menuDisabled: true, dataIndex: 'Priority' },
{ header: "Ticket",
width: 75,
fixed: true,
sortable: false,
menuDisabled: true,
dataIndex: 'Ticket',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: "Incident",
width: 200,
resizable: false,
sortable: false,
menuDisabled: true,
dataIndex: 'IncidentDes',
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
tbar: [{
iconCls: 'add16',
text: 'Add Ticket',
handler: function() {
crmeditor.stopEditing();
var r = new crmstore.recordType({Priority: crmstore.getCount() + 1, Ticket: '', IncidentDes: ''});
crmstore.insert(0, r);
crmgrid.getView().refresh();
crmgrid.getSelectionModel().selectRow(0);
crmeditor.startEditing(0);
}
},{
iconCls: 'delete16',
text: 'Delete Ticket',
handler: function() { crmstore.remove(crmgrid.getSelectionModel().getSelected()); }
}]
});
});


Here is my Json response from the server with a 200 OK:

{"success":true,"message":"Created record","crm_priorities":{"Priority":7,"Ticket":"99999999","IncidentDes":"Incident Description","id":99}}

I welcome the opportunity for someone to find my mistake(s) so I can correct it and move on with development. That is all I care about.

At the moment, all tests and evidence point to the fact that the JsonStore HttpProxy{api{create,update,destroy}} methods simply do not function, because I can replicate the failure by following existing examples and documentation with a 100% failure rate.

Animal
17 Aug 2010, 1:32 PM
You have to set a breakpoint at the line I showed you.

It does work. Really. It does. People use it. All the time.

Here's an app I wrote:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/CRUDworks.png

Modifying a User usig the RowEditor, clicking "Update". Job done.

Nobody can remote debug for you. You have a bug, and unless we visit your site, we won't be able to debug it.

markjlyon
17 Aug 2010, 1:39 PM
If people, including you, use it successfully all the time please explain why no one, including you, are able to provide any working working examples?

It is that simple.

CrazyEnigma
17 Aug 2010, 1:57 PM
CRUD is relatively simple. I have worked with it. You just have to understand how CRUD gets fired.

Without the grid to add a record, first you need to create a record using recordType on the store, then insert, this will fire CREATE.

Removing the record from the store will fire DESTROY.

Getting the record, using the beginEdit and endEdit on the record directly will fire UPDATE.

I'm sure with EditorGridPanel, this is even easier.

markjlyon
18 Aug 2010, 7:08 AM
I have created the callback exactly as you have it listed above and it returns:

action: create
rs: null
batch: 1

success: false
rs: null
data: null

So there is no returned data.

MiamiCoder
18 Aug 2010, 7:25 AM
What web server did you say you're using?

markjlyon
18 Aug 2010, 7:45 AM
I am using IIS 7. I am successfully using AJAX and the read method of the JsonStore using it. I have compared its results against the writer.html Firebug results and they are indentical so far as POST, RESPONSE, and HTML (except the field names are different).

I have tried it with Abyss but got the same results.

CrazyEnigma
18 Aug 2010, 9:14 AM
I have created the callback exactly as you have it listed above and it returns:

action: create
rs: null
batch: 1

success: false
rs: null
data: null

So there is no returned data.

So, did the writer fire the requests for C,U,D. That's the first thing to determine. Once that is done, then determine how you should handle it on the server-side and fire the appropriate response that the request is expecting.

markjlyon
18 Aug 2010, 10:08 AM
Hi CrazyEnigma.

Yes, the writer fires the request, it reaches the server, the server responds, and the JsonStore errors out. And it always errors out the same, regardless of what is in the server response.

"communication error"

CrazyEnigma
19 Aug 2010, 6:53 AM
Have you tried just using a Store instead of JsonStore?