1

I want to popup a window to interact with people who want to upload a file to server. I want to render a file input form in the new window, but I can't make it run by doing follows:

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 回答