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