ExtJS:如何将新对象添加到存储并将 POST 请求发送到 RESTful 服务器

Question

我正在使用ExtJS 6创建一个Todo应用程序。我的应用程序应该获取数据，这里是使用 RESTful Web 服务从服务器中获取的待办事项列表，并添加新的待办事项任务并将此新任务发送到服务器中。对于获取部分，它成功地显示了来自服务器的数据，但我仍然面临添加数据并发送回服务器的问题。

以下是我拥有的组件：

• 一个名为ToDoList的View，其中包含 1 个textfield和 1 个用于添加新待办事项任务的button：

  Ext.define('ToDo.view.toDoList.ToDoList',{
  extend: 'Ext.panel.Panel',
  requires: [
  'ToDo.view.toDoList.ToDoListController',
  'ToDo.view.toDoList.ToDoListModel'
  ],
  xtype: 'app-todoList',
  controller: 'todoList',
  viewModel: {
  type: 'todoList'
  },
  items: [{
  xtype: 'container',
  items: [{
  xtype: 'container',
  layout: 'hbox',
  cls: 'task-entry-panel',
  defaults: {
  flex: 1
  },
  items: [{
  reference: 'newToDo',
  xtype: 'textfield',
  emptyText: 'Enter a new todo here'
  },
  {
  xtype: 'button',
  name: 'addNewToDo',
  cls: 'btn-orange',
  text: 'Add',
  maxWidth: 50,
  handler: 'onAddToDo'
  }]
  }]
  }]
  });
  

• 我的ViewModel称为ToDoListModel，其中包含名为todos的存储对象，其中包括3个参数：id, desc and done。

  Ext.define('ToDo.view.toDoList.ToDoListModel', {
  extend: 'Ext.app.ViewModel',
  alias: 'viewmodel.todoList',
  stores:{
  todos: {
  fields: [{ 
  name: 'id',
  type: 'string'
  },
  {
  name: 'desc', 
  type: 'string'
  },
  {
  name: 'done', 
  type: 'boolean'
  }],
  autoLoad: true,
  sorters: [{
  property: 'done',
  direction: 'ASC'
  }],
  proxy: {
  type: 'rest',
  url: 'http://localhost:8082/RegistrationForm/tasks/',
  reader: {
  type: 'json'
  },
  writer: {
  type: 'json'
  }
  }
  }
  }
  });
  

我的ViewController叫：ToDoListController看起来像：

Ext.define('ToDo.view.toDoList.ToDoListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.todoList',
views: ['ToDo.view.toDoList.ToDoList'],
init: function(){
var me = this;
this.getViewModel().data.todos.load(function(records){
Ext.each(records, function(record){
console.log(record);
me.addToDoToView(record);
});
});
Ext.getBody().on('click', function(event, target){
me.onDelete(event, target);
}, null, {
delegate: '.fa-times'
});
},
onAddToDo: function () {
var store = this.getViewModel().data.todos;
var desc = this.lookupReference('newToDo').value.trim();
**HOW CAN I ADD NEW OBJECT TO STORE AND PERFORM POST REQUEST HERE TO THE SERVER**

},
addToDoToView: function(record){
this.view.add([{
xtype: 'container',
layout: 'hbox',
cls: 'row',
items: [{
xtype: 'checkbox',
boxLabel: record.get('desc'),
checked: record.get('done'),
flex: 1
},
{
html: '<a class="hidden" href="#"><i taskId="'+ record.get('id') + '" class="fa fa-times"></i></a>'
}]
}]);
},
onDelete: function(event, target){
var store = this.getViewModel.data.todos;
var targetCmp = Ext.get(target);
var id = targetCmp.getAttribute('taskId');
store.remove(store.getById('id'));
store.sync({
success: function(){
this.view.remove(targetCmp.up('.row').id)
},
scope: this
});
}
});

当用户单击添加按钮时，控制器中的函数onAddToDo((将被调用，在这里它将从文本字段(此处为desc变量(获取新任务，创建一个新的Todo对象，然后使用POST请求将此对象发送到服务器。我在服务器中的服务如下所示：

//ADD new Todo
@RequestMapping(value = "/tasks/", method = RequestMethod.POST)
public ResponseEntity<Void> createUser(@RequestBody Todo todo,    UriComponentsBuilder ucBuilder) {
//add this new Todo object to the database 
return new ResponseEntity<Void>(headers, HttpStatus.CREATED);
}

我想做的是在用户输入新任务后，将其打包为新对象，结构如下所示：{'id'=1, 'desc'='what user entered','done'=false}并将其作为 POST 方法的请求正文发送到服务器。谁能指导我怎么做？谢谢

Answer 1

您可以使用add()函数将记录添加到存储区。

store.add({id:1, desc:'what user entered',done:false});

然后，您可以调用sync()函数，该函数将调用存储的创建 api 并将插入的数据发送到服务器。

store.sync();

sync()在 3 种情况下将存储与服务器同步，即新记录创建、记录更新和记录删除。所以在这里，当我们添加新记录并调用sync()时，它将仅将新添加的记录发送到服务器，因为它不存在于服务器到存储中指定的 URL