1

ファイルをサーバーにアップロードしたい人とやり取りするためのウィンドウをポップアップ表示したいと考えています。新しいウィンドウでファイル入力フォームをレンダリングしたいのですが、次の方法では実行できません。

var win = new Ext.Window();
var fp = new Ext.FormPanel({
    renderTo: win,//I just guess that I can render this to the window I created...
    fileUpload: true,
    width: 500,
    frame: true,
    title: 'File Upload Form',
    autoHeight: true,
    bodyStyle: 'padding: 10px 10px 0 10px;',
    labelWidth: 50,
    defaults: {
        anchor: '95%',
        allowBlank: false,
        msgTarget: 'side'
    },
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    },{
        xtype: 'fileuploadfield',
        id: 'form-file',
        emptyText: 'Select an image',
        fieldLabel: 'Photo',
        name: 'photo-path',
        buttonText: '',
        buttonCfg: {
            iconCls: 'upload-icon'
        }
    }],
    buttons: [{
        text: 'Save',
        handler: function(){
            if(fp.getForm().isValid()){
                fp.getForm().submit({
                    url: 'file-upload.php',
                    waitMsg: 'Uploading your photo...',
                    success: function(fp, o){
                        msg('Success', 'Processed file "'+o.result.file+'" on the server');
                    }
                });
            }
        }
    },{
        text: 'Reset',
        handler: function(){
            fp.getForm().reset();
        }
    }]
});

win.show();
4

1 に答える 1

4

renderTo() メソッドに関する Ext JS ドキュメントに従って:

「Component がContainer の子項目である場合は、このオプションを使用しないでください。その子項目をレンダリングおよび管理するのは、Container のレイアウト マネージャーの責任です。」

だからあなたがする必要があるのは：

  1. renderTo オプションなしで formPanel を作成する

  2. ウィンドウを作成し、formPanel をウィンドウの項目として指定します。

    var win = new Ext.Window({    
//You can specify other properties like height, width etc here as well
items: [fp]   
});

このリンクで作業中のフィドルを参照できます。

http://jsfiddle.net/prashant_11235/2tgAQ/

于 2013-07-16T04:03:46.207 に答える