ExtJS загрузка фонового файла

Question

У меня есть ExtJS FormPanel с различными элементами формы (текстовые поля, числовые и т. Д.), В некоторых случаях мне нужна дополнительная загрузка файла в этой форме.

(на мой взгляд) Лучшим решением будет поле файла extJsв FormPanel, которая начинает загрузку, как только пользователь выбирает файл.После успешной загрузки файла (получение с сервера {success: true, fileid: 17}) поле файла должно исчезнуть, и вместо него должно появиться текстовое сообщение («Загрузка файла прошла успешно»).В дополнение к текстовому сообщению в FormPanel необходимо добавить (новый) скрытый ввод с идентификатором файла:

1. Пользователь выбирает файл с полем ExtJs.
2. Загрузка начинается немедленно (onChange).
3. Сервер успешно отвечает: true и fileId
4. Текст "Загрузка файла прошла успешно" заменяет поле файла
5. скрытый элемент формы с fileId добавляется в форму

Есть ли способ достичь этого (или аналогичного решения) с ExtJS 4?

Answer 1

Самый простой способ - обернуть filefield в панель и заменить содержимое в обработчике. Пример:

var formPanel = Ext.create('Ext.form.Panel', {
    renderTo: 'testdiv',
    title: 'Basic information',
    id: 'schnitzel',
    items: [
        {
            xtype: 'textfield',
            name: 'title',
            fieldLabel: 'Title'
        },
        {
            xtype: 'panel',
            layout: 'fit',
            border: false,
            items: [{
                xtype: 'filefield',
                buttonOnly: true,
                name: 'file',
                onChange: function(value) {
                    var panel = this.ownerCt;
                    formPanel.submit({
                        url: 'index4_submit.php',
                        waitMsg: 'Uploading the image ..',
                        clientValidation: false,
                        success: Ext.Function.bind(panel.onSuccess, panel)
                    });                    
                }
            }],
            onSuccess: function(form, action) {
                if (action.result.success !== true) {
                    return;
                }

                this.removeAll();
                this.add({ 
                    xtype: 'label',
                    text: 'File upload was successful'
                });
                this.add({ 
                    xtype: 'hidden',
                    name: 'file',
                    value: action.result.fileid
                });
            }
        }
    ]
});