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

Question

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

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

1. Пользователь выбирает файл с файловым полем ExtJs.
2. Загрузка начинается немедленно (onChange).
3. ответы сервера с успехом: правда и FILEID
4. Текст «Загрузка файла был успешным» заменяет FileField
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 
       }); 
      } 
     } 
    ] 
});