javascript - Ajax 流の ExtJs 4.1 ファイルアップロード

Question

ExtJs を使用して ajax 方式でファイルをアップロードする必要があるという要件があります。私のフォームには、テキスト、テキストエリアなどの他の多くのフィールドが既にあります。親フォーム内の別のフォームにファイルフィールドを含めました。また、そのフォームには、クリックすると機能を実行するアップロードボタンがあります。そのボタン ハンドラーで、ファイル フィールドを保持するフォームを送信しています。その魅力のように機能します。唯一の問題は、ページが更新されることです。私はそれをしたくありません。このアップロードは ajax 方式で行う必要があります。

ExtJsを使用してそれは可能ですか? フォーム ターゲットを iframe に設定することで、純粋な html/javascript を使用すると、ページの更新を簡単に防ぐことができることがわかっています。

これに対するそのような解決策はありますか？

この問題のアイデアまたは解決策を教えてください

これは私のコードのスニペットです:

{
            xtype: 'form',                
            items: [
                {
                  xtype: 'filefield',
                  name: 'file',
                  fieldLabel: '<b>Presentation</b>',
                  msgTarget: 'side',
                  labelAlign: 'top',
                  width: 300,
                  allowBlank : true,
                  id: 'file',

                  buttonCfg: {
                    text: '',
                    iconCls: 'upload-icon'
                 }
                },
                {
                  xtype: 'panel',
                  id: 'selectdFileName',
                  html: '<b>' + presenationFile + '</b>'
                },
                {
                  xtype: 'panel',
                  html: '<br/>'
                },
                {
                  xtype: 'button',
                  text: 'Upload',
                  handler: function() {
                    var form = this.up('form').getForm();
                    form.target = 'upload_target';
                    if (form.isValid()) {
                      form.submit({
                        url: contextPath + '/app/uploadFile',
                        params: {
                          id: formId
                        },
                        waitMsg: 'Uploading presentation...',
                        success: function(form, action) {
                          var respJson = Ext.JSON
                                  .decode(action.response.responseText);
                          Ext.getCmp('selectdFileName').update(
                                  "<b>" + respJson.path + "</b>");
                        }
                      });
                    }
                  }
                }]

          }

上記のコードでは、他の多くのフィールドを持つ別のフォームがこのフォームを囲んでいます。

これで私の問題をよりよく理解できるかどうか教えてください。