ExtJS背景文件上傳

我有一個ExtJS FormPanel具有不同的表單項（文本框，數字等），在某些情況下，我需要在這種形式上傳一個附加的文件上傳。ExtJS背景文件上傳

（在我看來）最好的解決方案是FormPanel中的一個extJs文件，它會在用戶選擇文件後立即開始上傳。成功上傳文件後（從服務器獲取{success：true，fileid：17}），文件字段應該消失，並且應該顯示文本消息（「文件上傳成功」）。除文本消息外，必須將具有fileid的（新）隱藏輸入添加到FormPanel中：

用戶選擇帶有ExtJs文件的文件。
立即開始上傳（onChange）。成功
服務器答案：真實的fileid
文本「文件上傳成功」取代
與FILEID隱藏的表單項目被添加到窗體

FileField或有什麼辦法來實現這一目標（或類似的解決方案）與ExtJS 4？

來源

2012-03-07 wessnerj

簡短的回答 - 是的。但我並不認爲有人會爲你編寫所有的代碼。如果你試圖自己完成任務，然後來到這裏解決具體問題，那會更好。 – 2012-03-07 09:25:55

我到目前爲止所嘗試的是以下內容：http://jsfiddle.net/fdxtK/1/（jsfiddle示例將不會在jsFiddle原因相同的來源策略）但我不知道接下來該做什麼。 – wessnerj 2012-03-07 09:41:50

最簡單的方法是在面板中包裝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 
       }); 
      } 
     } 
    ] 
});

來源

2012-03-07 10:57:22 Krzysztof

ExtJS背景文件上傳

回答

相關問題