通过请求负载将网格面板数据传递给 REST 控制器

Question

我有一个在 extjs 框架中创建的用户表单。用户表单有许多用户字段，它们作为请求负载的一部分传递给 REST 控制器。我正在尝试向用户表单添加一个网格面板（很可能是具有多行和多列的表格格式）。但我不确定如何将网格面板数据作为请求负载的一部分传递给 REST 控制器。如果需要更多详细信息，我将 post 更多代码。任何帮助，将不胜感激。谢谢

Ext.define('soylentgreen.view.admin.UserForm', {
    extend : 'Ext.form.Panel',
    alias : 'widget.userform',
    bodyStyle : 'padding:5px 5px 0',

// some userform elements like firstname,lastname, go here.....

name : 'userTeamGrid',
  xtype : 'gridpanel',
id : 'userTeamGrid',
itemId : 'userTeamGrid',
multiSelect : true,
selModel : Ext.create(
        'Ext.selection.CheckboxModel',
        {
          injectCheckbox : 'first',
          mode : 'MULTI',
          checkOnly : false
        }),
anchor : '100%',
width : '700px',
height : 250,
flex : 1,
store : 'userTeamStore',

var user = form.getRecord();
form.updateRecord(user);
user.save({
        callback : function(records, operation){
          //reset the (static) proxy extraParams object
          user.getProxy().extraParams =  {
            requestType: 'standard'
          }
          if(!operation.wasSuccessful()){
            var error = operation.getError();

Answer 1

IMO，这是我们在 ExtJS 中面临的最复杂但最常见的问题之一。它必须经常解决，但大多数解决方案必须根据具体要求略有不同。

网格绑定到完整的存储，而不是单个记录。因此，如果您想将记录中的数据（例如作为数组）获取到网格中，反之亦然，您必须在存储中的数据与记录的单个字段中的值之间建立映射。例如从商店获取所有数据，通用解决方案是

store.getRange().map(function(record) { return record.getData(); });

如果你只需要网格选择（也许你想使用 checkboxselection 模型或类似的）and/or 只需要记录的某些字段，你必须根据你的需要更改此代码，例如

grid.getSelectionModel().getSelection().map(function(record) {return record.get('Id'); });

所以，你的记录是和表单绑定的，而表单是由字段组成的。如何让网格数据被接受为表单的一部分？

您必须在表单中添加一个 hiddenfield，并根据您的要求覆盖 setValue、getValue、getModelData、getSubmitValue。通常，hiddenfield 会尝试将其值转换为字符串，但显然，您需要在那里允许数组；并且您想在调用 setValue 时修改网格，或者在调用其中一个 getter 时从网格中读取值。这四个函数用于以下用途：

setValue应该用于根据你在记录中找到的值修改网格。
getValue用于比较操作（检查值是否发生变化，表示表单变脏，必须提交等），如果调用form.getValues。您应该 return 一些基于其中的网格状态的值。
getModelData被form.updateRecord方法使用；它应该 return 模型字段的转换方法可以使用的值。
getSubmitValue 被 form.submit 方法使用，它应该 return 一个可以安全传输到服务器的值（如果表单没有，则必须是一个字符串设置 sendAsJson:true)

我无法为您提供这些实现的确切方法，因为它们特定于您的要求。

通过请求负载将网格面板数据传递给 REST 控制器

Passing grid panel data via request payload to REST controller

rest

controller

extjs

request

payload