javascript EXTJS + 保存网格后使用数据库 ID 更新商店

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3706337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 02:00:42  来源:igfitidea点击:

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

javascriptextjs

提问by FlySwat

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

我正在尝试学习如何使用 EXTJS 网格对管理应用程序中的表进行一些简单的 CRUD 操作。

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

但是,在创建新用户时,用户的 JSON POST 将发布到与“更新”相同的 REST 服务端点,唯一的区别是不发布 ID 值(因为加载时仅在商店中设置)从服务器)。

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.

save REST 服务使用新的数据库 ID 发回创建的行,我假设 EXTJS 会自动将新生成的数据库 ID 绑定到该行。这允许用户进一步编辑该行,并导致更新而不是插入。

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

相反,该行仍然有一个空白的用户 ID,因此额外的保存会创建另一个新用户。

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.
  • EXTJS 应该自动解析生成的行 ID,而我只是做错了什么。
  • 我应该在每次保存后使用额外的 REST 调用手动重新加载网格。

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

我一直在查看 EXTJS 文档和论坛,但我不清楚正确的方法。

Can someone clarify?

有人可以澄清吗?

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

编辑:我尝试在 JSON 中返回 Success = True 以匹配 SuccessProperty,但是这似乎仍然不起作用。

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.

编辑#2:到目前为止,我发现唯一有效的方法是在保存后执行“userDataStore.reload()”,但是因为我在保存后返回了商店的内容,所以我希望 EXTJS 能够理解这一点并且更新行值。

回答by Zango

    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;
       }
   })

})

回答by kolen

Yes, it sets id (and also other fields, if server returns modified values of them), if createajax 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.:

是的,它设置 id(以及其他字段,如果服务器返回它们的修改值),如果创建ajax 后端返回带有 set id 的记录,至少在 extjs 4.1 中。您应该返回插入的记录,id 设置,在 'root' 键下作为 json 字典,在这个例子中,root 是 'Data',即:

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

回答by Vaidas Zilionis

You need reload store with new params in savebtn handler like store.reload();

您需要在 savebtn 处理程序中使用新参数重新加载存储,例如 store.reload();

of course you can add more params to load action

当然你可以添加更多的参数来加载动作