PDA

View Full Version : [solved] Submit an EditorGridPanel



vinnybozz
5 Jun 2008, 9:14 AM
Hi, I have just discovered ExtJS a few days ago ... it really seems like an amazing library.

Im starting very simple for now and was wondering if someone could help me with a small issue.
I have tried looking a examples and turoirals but they are all a little too complex for now.

I created a simple EditorGridPanel and I was wondering how I could submit the user generated content from this grid to a server.

Is there a Submit method in the Ext.EditorGridPanel class ?
Should I include it in an Ext.FormPanel ?

thx for your help

devnull
5 Jun 2008, 9:35 AM
editorGrid is not a form, nor is it a field that will work in a form.
if you want to get data from the grid, you will have to create your own functions to be used in a submit handler. the most common cases with editorGrid usually involve calling getModifiedRecords() from it's store.

vinnybozz
5 Jun 2008, 12:27 PM
im still new at this so bear with me :">

so I was able to make my Save button and Handler work...

Now, how do I send the store to the server.
Should I send the whole store or record by record.
How should I send the data, as basic form fields, is there a way to serialize the store or records...

thx, any help is always greatly appreciated.

devnull
5 Jun 2008, 2:41 PM
the getModifiedRecords() returns an array of Ext.Record objects, you would need to turn that into a simple array and Ext.encode that for inclusion as a property of an ajax call or store load call (however you are transmitting your data). best way to do that is walk the array of Records and append the contents of the data property as a new item in a new array.
if you want the entire store as opposed to just the modified records, the same method would apply but you could use store.each() to walk the records.

vinnybozz
6 Jun 2008, 5:56 AM
So this is the Save button (for now - still testing) that I implemented:


// creating Save button
var Save_btn = new Ext.Button({
text: 'Save',
handler: function() {
store.each(function() {
var json_params = Ext.encode(this.data);
Ext.Ajax.request({
url: 'action.cfm',
success: function() {console.debug(json_params)},
failure: function() {console.debug('failure')},
callback: function(o,s,r) {$('#response').html(r.responseText)},
params: json_params
});
});
},
tooltip: 'Save this Template if it is still incomplete'
});so for each record in the store, it encodes it to a json string and then passes it to the ajax request ...

Now im having trouble on the server side:

for some reason the above code doesnt work ...
lets say my json_params = Ext.encode(this.data) returned the json string {"num":"1507130"}

when I pass params: json_params,
it doesnt recognize json_params as a String...

but if I do

// creating Save button
var Save_btn = new Ext.Button({
text: 'Save',
handler: function() {
store.each(function() {
var json_params = Ext.encode(this.data);
Ext.Ajax.request({
url: 'action.cfm',
success: function() {console.debug(json_params)},
failure: function() {console.debug('failure')},
callback: function(o,s,r) {$('#response').html(r.responseText)},
params: {"num":"1507130"}
});
});
},
tooltip: 'Save this Template if it is still incomplete'
});it works !

so whats going on here ? isnt json_params equal to {"num":"1507130"}
the problem is I dont know what the error is, I think the server side is just not parsing the parameters and therefore returns an error.

again thx for all the help so far

devnull
6 Jun 2008, 7:32 AM
are you sure you want to make an ajax request for EVERY row in the grid? that will lead to some pretty serious performance problems eventually.
if you are indeed going to be doing a request for each record, there is no reason to encode the data object first since theres just one of them.

vinnybozz
6 Jun 2008, 7:46 AM
Well basically, Im still just testing the waters ... trying to see what works, what doesnt and why ...

I probably wont be doing an ajax request for every record later, but for now I want to know how to do it ...

so my question is, how should I send this record.
Right now this:



// creating Save button
var Save_btn = new Ext.Button({
text: 'Save',
handler: function() {
store.each(function() {
var json_params = Ext.encode(this.data);
Ext.Ajax.request({
url: 'action.cfm',
success: function() {console.debug(json_params)},
failure: function() {console.debug('failure')},
callback: function(o,s,r) {$('#response').html(r.responseText)},
params: json_params
});
});
},
tooltip: 'Save this Template if it is still incomplete'
});


doesnt work ...

any ideas

devnull
6 Jun 2008, 8:11 AM
store.each(function(record) {
Ext.Ajax.request({
url: 'action.cfm',
success: function() {console.debug(json_params)},
failure: function() {console.debug('failure')},
callback: function(o,s,r) {$('#response').html(r.responseText)},
params: record.data
});
});
},

vinnybozz
6 Jun 2008, 8:24 AM
wow that seemed so very simple and it worked ...
i wonder what was wrong with the way I had done it.

Anyways, again thx for the help

devnull
6 Jun 2008, 8:51 AM
the problem with yours is the you were assigning a string to params when an object is expected. you could have done 'params: {record: json_params}' as well, and indeed you will have to do something like that if you want to send more than one record. of course on the server side you would have to json decode the 'record' post or get var.

vinnybozz
6 Jun 2008, 11:39 AM
ya i know, i just realized it !

i hadnt used JSON before to transmit data between client and server ...

For the server side, since Im using coldfusion, I found online a Component to handle JSON data, its called CFJSON (http://www.epiphantastic.com/cfjson/index.php).

up til now everything works well...


thx for the help (things are getting clearer, slowly but surely)

mjlecomte
7 Jun 2008, 11:13 AM
There's several different ways to save changes, you might peruse the various examples about and play with them as well.
Some options I have seen:

save with a save button
save when change page
save any change instantly
save changes on a row when focus leaves that row
have a window popup with a form to edit and use a button to save from that form.