Question

我是Extjs4和javascript世界的新手。我查阅了文档和示例，并尝试使用我的spring后端获得一个基本的CRUD网格。

我对extjs中的代理有困惑，是根据MVC范例在商店还是模型中？

我有一个控制器.js定义了将它们包装在一起。我原本认为REST调用将根据指定的URL进行，现在就是这样，但创建调用仍在发送整个列表。我在后端使用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）我正在使用RowEditing插件..如何在我的controller.js中获取roweditor，其中视图的引用可用

提前致谢

相关代码清单......

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

// UserStore

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

}

Answer 1

我会将Proxy的内部对象放在商店对象中，而不是模型。但这只是个人偏好。
将记录添加到商店对象时，如果将autoSync属性设置为true，则会自动生成创建请求。您的创建请求究竟发生了什么？发送了什么？

Answer 2

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

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

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

带有Spring Controller的Extjs4 RESTful CRUD网格

2 个答案: