PDA

View Full Version : Grid content JSON conversion



bunty
24 Oct 2012, 9:08 AM
HI all,


I have a grid where user and add new rows as many as they want. After adding all the rows, they click the "Save" button. On Save button click, I want to send all the data entered by the user in JSON format to the server side code (i.e. a servlet in my case)


Below is the model and store definition:


Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]
});




// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant'
});



On click of the save button, I am able to get the store like this:



{
text: 'Save',
handler : function(){
//Getting the store
var records = grid.getStore();
console.log(records.getCount());
Ext.Ajax.request({
url: '/CellEditing/CellEditingGridServlet',
method: 'POST',
jsonData: {
//How to assign the store here such that
//it is send in a JSON format to the server?
},
callback: function (options, success, response) {

}
});
}



But I don't know like how to convert the store content into JSON and send it in the `jsonData` of the ajax request.


I want the JSON data something like this in the server side:




{"plantDetails":
[
{
"common": Plant1,
"light": 'shady',
"price": 25.00,
"availDate": '05/05/2013',
"indoor": 'Yes'
},
{
"common": Plant2,
"light": 'most shady',
"price": 15.00,
"availDate": '12/09/2012',
"indoor": 'No'
},
]
}



Please let me know how to achieve this.

Regards,

vietits
24 Oct 2012, 6:00 PM
Why don't you let your store do it for you?


var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
url: '/CellEditing/CellEditingGridServlet',
writer: {
type: 'json',
root: 'plantDetails'
}
}
});

'Save' button code:


{
text: 'Save',
handler: function(){
grid.getStore().sync();
}
}

bunty
25 Oct 2012, 4:52 AM
Hi,

The code worked exactly the way I wanted. But in the JSON I can see an additional parameter


"id":null

Where is this coming from since I don't have this defined in my model? How to set some value to this then rather than a default null value?

vietits
25 Oct 2012, 5:02 AM
Each record in store will have a key. Default name of key field is 'id'. You can use a field other than 'id' as key field. This is done by using idProperty config when you define data model. When you add record to store, if you don't specify a specific value for id, it will be null.

bunty
25 Oct 2012, 5:12 AM
"IS there some way like I can auto-increment it based on the number of rows or something?

e.g. If there are three rows in a store then the id values will be 1,2 and 3 for each different set of record?

vietits
25 Oct 2012, 5:23 AM
You can do that with idgen (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-cfg-idgen) config.