ExtJs 6 中的表单提交

Question

我有一个表单，我提交了成功和失败的回调：

观点：

Ext.define('App.view.CommentForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.ship-commentForm',
    url: 'addcomment.php',
    items: [{
        xtype: 'textarea',
        fieldLabel: 'Comment',
        name: 'text',
        allowBlank: false,
        maxLength: 1000
    },{
        xtype: 'textfield',
        fieldLabel: 'User name',
        name: 'username',
        readOnly: true
    }],
    fbar: [{
        text: 'Save',
        formBind: true,
        itemId: 'submit'
    }]
})

控制器：

Ext.define('App.controller.MyController', {
    init: function(){
        this.control({
            'ship-commentForm button#submit': {click: this.onFormSubmit},
...
    onFormSubmit: function(btn){ 
        var form = btn.up('form').getForm(),
        me = this,
        values = form.getValues();
        form.submit({
            success: function(form, action){
                console.log('success')
            },
            failure: function(form, action){
                console.log('failure')
            }
        })
        setTimeout(function(){btn.up('window').close()}, 100)
    },

虽然这在 ExtJs4 中效果很好，但在 ExtJs6 中，表单会按应有的方式提交，但不再调用成功和失败回调。根据 the documentation of submit().

这应该仍然有效

N.B。服务器响应包含有效的 JSON 字符串：

{"success":true,"msg":"Comment saved"}

编辑：我刚刚在我怀疑是问题的控制器中添加了代码： setTimeout(btn.up('window').close(), 100)

Answer 1

不要用 setTimeout 关闭 window，而是将其放在 form.submit() 的成功回调中。它应该可以解决您的问题。

form.submit({
    success: function(form, action){
        btn.up('window').close()
    },
    failure: function(form, action){
        console.log('failure')
    }
})

ExtJs 6 中的表单提交

Form submission in ExtJs 6

forms

extjs

extjs4

upgrade

extjs6