PDA

View Full Version : Load edit form data from JSON store



sinma
1 Feb 2008, 12:14 AM
Hi,

I need to load one record data into a form from JSON.

I have the next data:
{"booklog":{"Booklog":{"id":3, "reception_date":"2007-12-17 17:17:00", "invoice_num":"n0003"}}}

And to load it I have followed the code example that posted Condor here: http://extjs.com/forum/showthread.php?p=112106#post112106

My code:
[code]
Ext.onReady(function(){
Ext.QuickTips.init(); // Init QuickTips
Ext.form.Field.prototype.msgTarget = 'side'; // turn on validation errors beside the field globally

recordBooklog = Ext.data.Record.create([
{ name: 'id', mapping: 'Booklog.id'},
{ name: 'reception_date', mapping: 'Booklog.reception_date'},
{ name: 'invoice_num', mapping: 'Booklog.invoice_num'}
]);

jrBooklog = new Ext.data.JsonReader({
root: 'booklog',
id: 'Booklog.id'
}, recordBooklog );

var form_booklog = new Ext.form.FormPanel({
frame: true,
autoScroll: true,
title: 'Editar Recepci

Condor
1 Feb 2008, 3:55 AM
The data needs to be in an array, e.g.


{"booklog":[{"Booklog":{"id":3, "reception_date":"2007-12-17 17:17:00", "invoice_num":"n0003"}}]}

sfwalter
1 Feb 2008, 4:18 AM
To make it even easier don't even use a JsonReader on your form, its not needed! Forms can be loaded from Json markup without you specifying a JsonReader. So remove the reader property from your form panel and simply have your server return this markup:



{ success, true,
data: {
"id":3,
"reception_date":"2007-12-17 17:17:00",
"invoice_num":"n0003"
}
}


Much easier IMHO

scott

sinma
1 Feb 2008, 4:23 AM
@Condor: Thanks a lot! I was going crazy... Now it works!

@scott: Thanks for your hint.

sinma
4 Feb 2008, 7:26 AM
Finally, I follow scott hint and my server return this markup:


{ success, true,
data: {
"id":3,
"reception_date":"2007-12-17 17:17:00",
"invoice_num":"n0003"
}
}

Now, I need to get the data.id value to add it to the form.load and form.submit actions:



var form_booklog = new Ext.form.FormPanel({
...
buttons: [
{
text: 'Save',
type: 'submit',
handler: function() {
form_booklog.form.submit({
url: appRoot+'/booklogs/edit2/'+data.id,
});
}
},
...
]
});

form_booklog.render('booklog-form');

form_booklog.getForm().load({
url: appRoot+'/booklogs/getBooklog/'+data.id,
waitMsg: 'Loading'
});


I have been looking for this a long time (forum, learn, examples), but I don't know how to do it yet. I'm blocked...

It is a basic question... but, how can I get the data.id value?

Thanks in advance.

Condor
4 Feb 2008, 7:33 AM
You should know the id when loading the form (otherwise your application would make no sense).

You could add the id as a xtype:'hidden' field, so you can retrieve it again when submitting the form (by using formPanel.getForm().findField('id').getValue()).

sinma
5 Feb 2008, 12:30 AM
The tree was not leaving me to see the forest...

Thanks Condor for your answers and your patience.

Solved matter.