PDA

View Full Version : How to submit grid data ?



ParthaSaha
23 May 2012, 6:29 AM
I am adding rows to a grid and after clicking a button I want those data submitted to server through a AJAX POST , but currently when I am submitting the form I tried to get the form data using form.getValues(). But I am not getting the grid data in the form values.

Tim Toady
23 May 2012, 6:45 AM
So are you trying to submit grid data or form data? If what you are doing is adding a record to the grid from a form and then pressing a save button for your grid, what you want is to have a ajax proxy set up on your store and then call yourStore.sync() when the save button is pressed. Here is an example to look at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/restful/restful.html

The example uses autoSync so you wouldn't call sync yourself if you were following it.

ParthaSaha
23 May 2012, 8:52 AM
Allow me to provide some more information. The grid is empty at form load , we add rows by entering data in some of the other fields in the form. There are other separate text boxes and combo in that form.

My requirement is when I click submit all data from those other text boxes and combos and along with that the grid data that I added manually should be available to the server when I submit the data (using form.getValues()) through a Ajax POST.

But as I mentioned I am getting data from ther text boxes and combos but I am not getting the data from the grid back.

James Goddard
23 May 2012, 9:58 AM
Sounds to me like you have a form with a grid inside of it? The problem is that a grid is not a 'form field'.

You have 2 decent options.
1) Extend Grid and create a "GridField" by mixing in Ext.form.field.Field and implementing at a minimum the 3 functions listed in the doc.
2) After you call form.getValues (), manually add the grid values:
values.gridName = grid.getStore ().getRange ();

vvorobeychik
23 May 2012, 10:47 AM
I use the principal option: do it simple and you will live longer.
Use the params property of the Ajax object. Loop through the records and build your obParam. Example:


var obParam = {};
obParam.itemsCount = yourStore.getCount();
for(var i = 0; i < yourStore.getCount(); i++)
{
obParam['fieldName1' + i] = yourStore.getAt(i).data.fieldName1;
...
obParam['fieldNameN' + i] = yourStore.getAt(i).data.fieldNameN;
}
Ext.Ajax.request({url:'yourURL', params:obParam, method:'POST',
success:function(result, request)
{
Your logic
},
failure:function(result, request)
{
Your logic
}
});

Tim Toady
23 May 2012, 11:25 AM
Sounds to me like you have a form with a grid inside of it? The problem is that a grid is not a 'form field'.

You have 2 decent options.
1) Extend Grid and create a "GridField" by mixing in Ext.form.field.Field and implementing at a minimum the 3 functions listed in the doc.
2) After you call form.getValues (), manually add the grid values:
values.gridName = grid.getStore ().getRange ();

The second option you list will result in 2 issues. The major issue being circular references which will probably cause the browser to hang. The other issue is that even if it did work, you are sending tons of front end data not relevant to the fields. That said, the idea behind it would be fairly straight forward with a modification. He would need to loop over those records and grab the store[ store.persistanceProperty ] and insert them into an array. Then send that array instead of all the records.