Results 1 to 7 of 7

Thread: Load edit form data from JSON store

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Barcelona
    Posts
    58

    Default Load edit form data from JSON store

    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

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    The data needs to be in an array, e.g.

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

  3. #3

    Default

    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:

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

    scott

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Barcelona
    Posts
    58

    Thumbs up

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

    @scott: Thanks for your hint.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Location
    Barcelona
    Posts
    58

    Question

    Finally, I follow scott hint and my server return this markup:

    Code:
    { 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:

    Code:
     
    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.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    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()).

  7. #7
    Sencha User
    Join Date
    Jan 2008
    Location
    Barcelona
    Posts
    58

    Thumbs up [SOLVED] Load edit form data from JSON store

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

    Thanks Condor for your answers and your patience.

    Solved matter.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •