Question

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

以下是我的组件：

名为View的{{1}}，其中包含1 ToDoList和1 textfield，用于添加新的 Todo 任务：
```
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，其中包含名为待办事项的商店对象，其中包含3个参数：ToDoListModel。
```
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

当用户点击添加按钮时，控制器中的 onAddToDo（）功能将被调用，此处将显示来自 textfield （此处为 desc 变量）的新任务，创建一个新的Todo对象，然后使用POST请求将此对象发送到服务器。我在服务器中的服务将如下所示：

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

});

我想要做的是在用户输入新任务后，我将其打包为新对象，结构如下：//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); }并将其作为POST方法的RequestBody发送到服务器。任何人都可以指导我如何做到这一点？谢谢

Answer 1

您可以使用add()功能将记录添加到商店。

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

然后你可以调用sync()函数来调用商店的create api并将插入的数据发送到服务器。

store.sync();

sync()将商店与服务器同步3种情况，即新记录创建，记录更新和记录删除。所以当我们添加一条新记录并调用sync()时，它只会将新添加的记录发送到服务器，因为服务器上没有记录到商店中指定的URL

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

1 个答案: