1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    102
    Vote Rating
    1
    Answers
    1
    sj_tt6 is on a distinguished road

      0  

    Default Answered: Need help: load data to form

    Answered: Need help: load data to form


    Hi,

    I learn how to use ExtJS4. I have a grid panel that displays a list of users. I also have a form that has several text fields. When I select a user by clicking a row in the grid panel I want to load data from the local json file and populate data into the form.

    In my controller:
    Code:
        ....
        onKeySelect: function(selModel, selection) {
            var id = selection[0].get('id');
            var form = this.getRecordForm();
            console.log("load data and fill in the form: " + form.getId() + " for record: " + id);
            var recordModel = this.getRecordFormModel();
            recordModel.load(id, {
                success: function(record) {
                    form.loadRecord(record); 
                }
            });
     },
    In my model:
    Code:
    Ext.define('MasterDb.model.RecordForm', {
        extend: 'Ext.data.Model',
        fields: ['id', 'first', 'last'], 
        proxy: {
            type: 'ajax',
            api: {
             create  : 'data/record.json',
             read    : 'data/record.json',
             update  : 'data/record.json',
             destroy : 'data/record.json'
           },
            reader: {
                type: 'json',
                root: 'results'
            }
        }
    });
    In record.json:
    Code:
    {
        'success': true,    
        'results': [
            {'id': 1, 'first': 'tester', 'last': 'A'}, 
            {'id': 2, 'name': 'tester2','last': 'B'}
        ]
    }

    When I run this code the form always loads the 1st record (tester A). In my controller I call load (id, {}) but in my model I don't know how to pass this id into the request. Can somebody show me how to set the parameter id in the model's proxy so that the model can load the correct record? Later I want to load data from the server using this way.

    I'm sure there are other ways to accomplish the same task but because I'm new to Sencha, please give me samples.

    Thank you!

  2. Quote Originally Posted by sj_tt6 View Post
    Hi,
    I think I was not clear in my previous post. What I meant was when I passed the id of the selected row in the grid panel as extraParam and I set the url to the server (Java), then the response had the correct record because the server used the id to read the record from the database.

    However if the url was set to the local file e.g. 'data/records.json', which had several records, then all records in this json file were fetched and the record in the
    Code:
    recordModel.load(id, { success: function(record) { form.loadRecord(record); } });
    was always the 1st one, no matter what value the argument 'id' had.

    I thought the model would only read from the json file the record that had the given id. Or do I have to configure the filter in the model so that the correct record is selected from the loaded result?

    Thanks,
    I understand what you mean but the Model.load() does not do what you think. As I mentioned in my previous post, it is responsible of the server side script to process the request and return the right record basing on the id. The model assumes that what you return from server is right result. It only read that result, mapping/converting values to its fields. Though the returned data is an array, but Mode.load() only get out one record and that is the first record.

    I think with your case, you should write a server script to do what I said instead of return a static json data as what you did.

    If you still want to use static json file. You can load its data to a store and then each time you need a record by id, you can use <store>.getById(id) to get out the record instead of loading it from server.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can use the following:

    Code:
    this.grid.getSelectionModel().on('select', function(selModel, model, idx) {
       this.form.loadRecord(model); 
    }, this);
    Regards,
    Scott.

  4. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    102
    Vote Rating
    1
    Answers
    1
    sj_tt6 is on a distinguished road

      0  

    Default


    Hi Scott,

    Thank you for your reply! I managed a way to pass the id parameter by adding extraParams to my model and setting the selected id to it before "recordModel.load(id {}); ". And it worked for me in case I load the data from the server.

    However, I have a question. In this code:


    recordModel.load(id, { success: function(record) { form.loadRecord(record); } });
    the first parameter id of the load method does not probably work because I use different values but the model always loads all records in the json file and the record in response (success case) is always the 1st one.

    Did I do something wrong or is it a bug?

    Thanks,

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    It's responsible of the server side script to process the request and to return the right response. In your case, your server side script should process the request basing on the id received and return the respective record.

  6. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    102
    Vote Rating
    1
    Answers
    1
    sj_tt6 is on a distinguished road

      0  

    Default


    Hi,

    I think I was not clear in my previous post. What I meant was when I passed the id of the selected row in the grid panel as extraParam and I set the url to the server (Java), then the response had the correct record because the server used the id to read the record from the database.

    However if the url was set to the local file e.g. 'data/records.json', which had several records, then all records in this json file were fetched and the record in the
    Code:
    recordModel.load(id, { success: function(record) { form.loadRecord(record); } });
    was always the 1st one, no matter what value the argument 'id' had.

    I thought the model would only read from the json file the record that had the given id. Or do I have to configure the filter in the model so that the correct record is selected from the loaded result?

    Thanks,

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Quote Originally Posted by sj_tt6 View Post
    Hi,
    I think I was not clear in my previous post. What I meant was when I passed the id of the selected row in the grid panel as extraParam and I set the url to the server (Java), then the response had the correct record because the server used the id to read the record from the database.

    However if the url was set to the local file e.g. 'data/records.json', which had several records, then all records in this json file were fetched and the record in the
    Code:
    recordModel.load(id, { success: function(record) { form.loadRecord(record); } });
    was always the 1st one, no matter what value the argument 'id' had.

    I thought the model would only read from the json file the record that had the given id. Or do I have to configure the filter in the model so that the correct record is selected from the loaded result?

    Thanks,
    I understand what you mean but the Model.load() does not do what you think. As I mentioned in my previous post, it is responsible of the server side script to process the request and return the right record basing on the id. The model assumes that what you return from server is right result. It only read that result, mapping/converting values to its fields. Though the returned data is an array, but Mode.load() only get out one record and that is the first record.

    I think with your case, you should write a server script to do what I said instead of return a static json data as what you did.

    If you still want to use static json file. You can load its data to a store and then each time you need a record by id, you can use <store>.getById(id) to get out the record instead of loading it from server.

  8. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    102
    Vote Rating
    1
    Answers
    1
    sj_tt6 is on a distinguished road

      0  

    Default


    Hi Vietits,

    Thank you for your explanation! Yes, I just use the static json file for testing. The actual data is from the backend.

    BR,

Thread Participants: 2