带有Spring控制器的Extjs4 RESTful CRUD网格

一般来说，我对Extjs4和javascript世界都是新手。我已经查阅了文档和示例，试图用我的spring后端建立并运行一个基本的CRUD网格

我对extjs中的代理感到困惑，它们是在商店中还是在模型中，根据MVC范式

我定义了一个controller.js，将它们打包在一起。 我原以为REST调用将根据指定的URL进行，目前是这样，但create调用仍在发送整个列表。我在后端使用jackson自动转换为java对象，但不知何故，这不起作用（仅用于添加和更新）

我怎样把这些联系起来

a） 添加用户。。我是创建一个新的UserModel，然后像这样调用rest调用，还是模型中指定的代理自动支持它

var record = new App.model.UserModel();
     store = Ext.getStore('UsersStore');
     store.insert(0, record);
     store.save();  // .. this invokes the /createUser method 
                    //   .. what about /update ?

b） 我正在使用行编辑插件。。如何在controller.js中获取视图引用可用的行编辑器

提前谢谢

相关代码列表

//UserController.js

Ext.define('App.controller.UsersController', {
extend : 'Ext.app.Controller',
init: function() {
    this.control({
        'userList button[action=add]' : {
                click : this.editUser
            }         });    },
views : ['user.List','user.Edit'],
stores : ['UsersStore'] ,
models : ['UserModel'],
editUser : function(grid,record)
{
    // empty record
     var record = new App.model.UserModel();
     // created new record

//How to get a reference to the roweditor here and then save that to the backend ?

 //store = Ext.getStore('UsersStore');
     //store.insert(0, record);
     //store.save();
    // this.getView('user.List').getP('rowEditor').startEdit(0, 0);

}});

//List.js

var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
 }
Ext.define('App.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userList',
title : 'All Users',
store : 'UsersStore',
selType: 'rowmodel',
plugins: rowEditor,
initComponent: function() {
    this.columns = [
        {header: 'SNo',  dataIndex: 'userID', width:50},
        {header: 'UID',  dataIndex: 'userUID',  flex: 1, editor: 'textfield', allowBlank:false},
        {header: 'Name',  dataIndex: 'userName',  flex: 1, editor:'textfield',allowBlank:false},
        {   header: 'Level',  dataIndex: 'userLevel',  flex: 1,
            editor: {xtype: 'combobox', typeAhead: true, triggerAction: 'all', selectionOnTab:true,
                     store : [
                              ['Level 1','Level 1'],
                              ['Level 2','Level 2'],
                              ['Level 3','Level 3']

                            ]
                }
        },
        {header: 'Email', dataIndex: 'emailID', flex: 1, editor: 'textfield'}
    ];
    this.callParent(arguments);
},
dockedItems : [{
    xtype : 'toolbar',
    items : [{
         text: 'Add',
         iconCls: 'icon-add',
         action: 'add'

    }]
}]});

//Model.js

Ext.define('App.model.UserModel', {
extend: 'Ext.data.Model',
fields: ['userID','userUID','userName', 'userLevel' ,'emailID'],
proxy : {
    type: 'ajax',
    api :
        {
            read : 'rest/user/fetchAll',
            update:'rest/user/updateUser',
            create :'rest/user/createUser',
            destroy : 'rest/user/deleteUser'
        },

    reader :
        {
        type : 'json',
        root : 'users',
        successProperty : 'success'
        },

    writer :
        {
        type : 'json',
        allowSingle : 'true'
        }
}});

//用户商店

Ext.define('App.store.UsersStore', {
extend: 'Ext.data.Store',
model: 'App.model.UserModel',
autoLoad : true});

//Java控制器示例

@Controller
@RequestMapping("/rest/user")
public class UserController {

@RequestMapping(value = "/fetchAll" ,  method= RequestMethod.GET)
public @ResponseBody Map<String,? extends Object> 
    fetchUsers()            {
    Map<String,Object> responseMap = new HashMap<String,Object>();
    responseMap.put("success",true);
    responseMap.put("users",userService.getUserRepository().findAll());
    return responseMap;  }

    // was expecting a single object here ?

@RequestMapping(value = "/createUser")
public @ResponseBody Map<String,? extends Object> 
                         createUser(@RequestBody    List<User> users) 
 {  ...   }

}

@控制器
@请求映射（“/rest/user”）
公共类用户控制器{
@RequestMapping（value=“/fetchAll”，method=RequestMethod.GET）
public@ResponseBody映射
fetchUsers（）{
Map responseMap=newhashmap（）；
响应映射put（“成功”，正确）；
responseMap.put（“users”，userService.getUserRepository（）.findAll（））；
返回响应映射；}
//你以为这里只有一个物体吗？
@请求映射（value=“/createUser”）
public@ResponseBody映射
createUser（@RequestBody列表用户）
{  ...   }
}

我会把代理放在存储对象中，而不是模型中。但这只是个人偏好

将记录添加到存储对象时，如果其autoSync属性设置为true，则会自动生成创建请求。您的创建请求到底发生了什么？正在发送什么

---

在尝试了Sha的上述评论之后，我终于能够解决这个问题。 问题在于json读取器

reader :
    {
    type : 'json',
    root : 'users',
    successProperty : 'success'
    //added
    idProperty : 'userID'
    },

---

我必须添加idProperty以使Json识别脏记录，否则它会将所有内容视为新记录并发回整个列表

两件不同的事情：1）我想通过rowediting插件添加一条记录。那么我如何在视图中引用它呢？在该行的“update”属性上执行此操作后，是否需要触发创建请求..因为它不是自动执行的？2） 如果我手动测试记录的创建：创建新模型、插入存储区和保存存储区，然后将创建请求发送到服务器，整个数据集都在网格中，我希望理想情况下只发送新记录。这不是行为吗？1。你可能有按钮或菜单项来创建新记录，对吗？然后只需执行rowEditor。在控制器中启动它（0,0）。2。是的，只有新记录应该被发送1。谢谢，正如我提到的，我是js新手，所以我想这个变量可以访问。但是，如果我没有为插件创建变量，而在视图的plugin部分中有代码，那么我如何能够从视图中访问“rowdeditor”插件呢。我正在查看文档，getPlugin（'pluginId'）本可以工作（在我为rowEditor创建了pluginId之后），但没有，视图2上没有此类方法getPlugin可用。对于这件事，我做错什么了吗？store.save（）发送整个列表。。。如果我删除json write上的allowSingle:true属性，这与我建议将idProperty移动到模型定义中的行为相同。很高兴我能帮忙