0

我是 Extjs4 和一般的 javascript 世界的新手。我查看了文档和示例,并尝试使用我的 spring 后端启动并运行基本的 CRUD 网格。

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

我定义了一个controller.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,其中视图的引用可用

提前致谢

相关代码清单...

//用户控制器.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'

    }]
}]});

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

}
4

2 回答 2

2
  1. 我会将代理放在商店对象中,而不是模型中。但这只是个人喜好。

  2. 当您将记录添加到存储对象时,如果它的 autoSync 属性设置为 true,它将自动生成创建请求。您的创建请求到底发生了什么?正在发送什么?

于 2012-04-09T16:57:47.863 回答
0

在尝试了上面沙的评论之后,我终于能够解决这个问题。问题出在json阅读器上

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

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

于 2012-04-10T13:17:38.450 回答