ExtJSバックグラウンドファイルのアップロード

Question

私はExtJS FormPanelのフォームアイテム（テキストフィールド、数値など）が異なる場合があります。このフォームにaddtionalファイルをアップロードする必要があります。

（私の意見では）最善の解決策は、ユーザーがファイルを選択するとすぐにアップロードを開始するFormPanelのextJsファイルフィールドです。ファイルを正常にアップロードした後（サーバーから{success：true、fileid：17}を取得）、ファイルフィールドが消え、テキストメッセージ（「ファイルアップロードは成功しました」）が表示されます。テキストメッセージに加えて、fileidの（新しい）非表示入力をFormPanelに追加する必要があります。

1. ユーザーはExtJsファイルフィールドでファイルを選択します。
2. アップロードがすぐに開始されます（onChange）。成功と
3. サーバーの応答：真とFILEID
4. テキスト「ファイルのアップロードが成功したが、」これを達成するためにどのような方法がありますFILEIDとFileFieldに
5. 隠しフォーム項目をフォーム

に追加され置き換わります（または同様のソリューション）を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 
       }); 
      } 
     } 
    ] 
});