EXTJS + Updating a store with the database ID after saving a grid

Question

I'm trying to learn how to use the EXTJS grids for some simple CRUD operations over a table in a admin app.

I have a simple grid that allows someone to edit users, the store is defined as:

        var userDataStore = new Ext.data.Store({
            id: 'userDataStore',
            autoSave: false,
            batch: true,
            proxy: new Ext.data.HttpProxy({
                api: {
                    read: '/Admin/Users/All',
                    create: '/Admin/Users/Save',
                    update: '/Admin/Users/Save'
                }
            }),
            reader: new Ext.data.JsonReader(
            {
                root: 'Data',                    
                idProperty: 'ID',
                totalProperty: 'total',
                successProperty: 'success',
                messageProperty: 'message'
            }, [
                { name: 'ID', type: 'string', allowBlanks: false },
                { name: 'NT_ID', type: 'string', allowBlank: false },
                { name: 'EMail', type: 'string', allowBlank: false },
                { name: 'Name', type: 'string', allowBlank: false },
                { name: 'Enabled', type: 'bool', allowBlank: false },
                { name: 'CurrentRoleCode', type: 'string', allowBlank: false}]
            ),
            writer: new Ext.data.JsonWriter(
            {
                encode: false,
                writeAllFields: true,
                listful: true
            })
        });

This is bound to a grid, and I am able to load and save users without issue. The save button looks like this:

   var saveButton = new Ext.Button({
            text: 'Save',
            disabled: true,
            handler: function() {
                userDataStore.save();                    
                pageState.ClearDirty();
                saveButton.disable();
            }
        });

However, when creating a new user, the JSON POST for the user is posted to the same REST service end point as "Update", with the only difference being that no ID value is posted (as one is only set in the store when loading from the server).

This works, and I am able to create users.

The save REST service emits back the created row with the new database ID, and I was under the assumption that EXTJS would automatically bind the new generated database ID to the row. This allows the user to further edit that row, and cause an update instead of a insert.

Instead, the row continues to have a blank user ID, so an additional save creates another new user.

So either:

• EXTJS is supposed to resolve generated row ID's automatically and I am just doing something wrong.
• I am supposed to manually reload the grid after each save with an additional REST call.

I've been looking at EXTJS documentation and forums, but I am unclear on the proper approach.

Can someone clarify?

EDIT: I tried returning Success = True in JSON to match the SuccessProperty, however this still didn't seem to work.

EDIT #2: So far the only thing I've found that works is doing "userDataStore.reload()" after saving, however because I was returning the contents of the store back after saving, I was hoping that EXTJS would understand that and update the row values.

Answer 1

    I've got an idea that may help you. Let't suppose that user added a new 
record in grid, in that moment add a new property newRecOrderNo to the record to 
identify the record after response. When user will post data to server after 
inserting you must get a new ID and associate it to newRecOrderNo 
(like Map<Integer,Integer>). Then return json object like that : 

{
    success : true,
    newIdes : {
           1 : 23,
           2 : 34
    }
}


Then when you get response do set proper IDs to records:

   userDataStore.each(function(rec){
       if(rec.data.newRecOrderNo){
           rec.data.ID = response.newIdes[rec.data.newRecOrderNo];
           delete rec.data.newRedOrderNo;
       }
   })

})

Answer 2

Yes, it sets id (and also other fields, if server returns modified values of them), if create ajax backend returns record with set id, at least in extjs 4.1. You should return inserted record, with id set, under 'root' key as json dictionary, in this example root is 'Data', i.e.:

{
  "Data": {
    "ID": 8932,
    "NT_ID": 28738273,
    ...
    "CurrentRoleCode": "aaa",
  },
  "success": true
}