Load edit form data from JSON store

[sinma]

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.ph...106#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]

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]

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]

@Condor: Thanks a lot! I was going crazy... Now it works!

@scott: Thanks for your hint.

[sinma]

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]

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]

The tree was not leaving me to see the forest...

Thanks Condor for your answers and your patience.

Solved matter.