Почему обратный вызов успеха не вызывается в представлении формы extjs?

Я пытаюсь загрузить файл с использованием форм Ext JS, а в случае успеха или неудачи показать соответствующие сообщения. Но я не могу получить желаемый результат. Я не могу сделать обратные вызовы success или failure в действии form.submit.

До сих пор я делал следующее:

Создание формы с помощью этого script:

new Ext.FormPanel({
    fileUpload: true,
    frame: true,
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
}).getForm().submit()


/*
    The response Content-Type is text/html (with charcode=utf8);
    The response JSON is: { "success": true }
*/

Настройка ответа Content-Type на text/html на основе этого ответа.
Отправка соответствующего результата JSON на основе Ext JS docs. Ответ, полученный через Fiddler:

{"success":false}

или

{"success":true}

Я даже установил ответ Content-Type на application/json. Но до сих пор нет успеха.

Я читал такие ссылки, как этот и этот, но ни один из им помогли. Обратите внимание, что я также попробовал еще один script, который создает форму с полем для загрузки и кнопкой сохранения, и я отправил форму в обработчик кнопки сохранения. Но все же обратный вызов не запускается.

Ответы

Ответ 1

Вот рабочий пример - Javascript code:

Ext.onReady(function () {

    Ext.define('ImagePanel', {
        extend: 'Ext.form.Panel',
        fileUpload: true,
        title: 'Upload Panel',
        width: 300,
        height: 100,

        onUpload: function () {
            this.getForm().submit({
                url: 'upload.php',
                scope: this,
                success: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Success: " + data.msg);
                },
                failure: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Failure: " + data.msg);
                }
            });
        },

        initComponent: function () {
            var config = {
                items: [
                    {
                        xtype: 'fileuploadfield',
                        buttonText: 'Upload',
                        name: 'uploadedFile',
                        listeners: {
                            'change': {
                                scope: this,
                                fn: function (field, e) {
                                    this.onUpload();
                                }
                            }
                        }
                    }
                ]
            };

            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });


    var panel = Ext.create('ImagePanel', {
        renderTo: Ext.getBody()
    });
});

И PHP-код:

<?php
if (isset($_FILES)) {
    $temp_file_name = $_FILES['uploadedFile']['tmp_name'];
    $original_file_name = $_FILES['uploadedFile']['name'];

    echo '{"success": true, "msg": "'.$original_file_name.'"}';

} else {
    echo '{"success": false, "msg": "No Files"}';
}

Ответ 2

Я боролся с этим уже довольно давно. Здесь мой код:

Ext.getCmp('media-upload-form').getForm().doAction('submit', {
    url: './services/recordmedia/upload',
    method: 'post',
    waitMsg: 'Please wait...',
    params: {
        entityId: this.entityId,
    },
    failure: function(form, action){
        alert(_('Error uploading file'));
        this.fireEvent('file-upload');
        this.close();
    },
    success: function(form, action){
        this.fireEvent('file-upload');
        this.close();
    },
    scope: this
})

Ответ всегда был завернут в <pre> теги браузером, что заставило Extj lib не вызывать обратные вызовы. Чтобы исправить это:

убедитесь, что ваш сервер возвращает правильный json: { "success": true}
убедитесь, что для типа содержимого задано значение text/html

Ответ 3

Собственно, это хорошо освещено документами для Ext.form.Panel и Ext.form.Basic. Проблема с вашим кодом не работает в том, что нет параметров конфигурации "успех", "сбой" для панели формы. Вы должны поместить их в объект конфигурации, переданный в действие submit. Поэтому ваш код должен выглядеть так:

new Ext.FormPanel({
    fileUpload: true,
    frame: true


}).getForm().submit({
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
});

Обратите внимание на разницу: в Ext 4 есть компонент формы (Ext.form.Panel), который в основном представляет собой компонент вида, связанный с тем, как вы формируете внешний вид, а затем существует базовый класс формы (например, Ext.form. Basic), связанных с функциональностью. Представления форм обрабатываются Ext.form.Basic(или что-то, возвращаемое вашим form.getForm()).