Question

我想弹出一个窗口，与想要将文件上传到服务器的人进行交互。我想在新窗口中呈现文件输入表单，但我不能通过执行以下操作来运行它：

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();

Answer 1

根据有关renderTo（）方法的Ext JS文档：

“如果Component要成为Container的子项目，请不要使用此选项.Colice的布局管理器负责呈现和管理其子项目。”

所以你需要做的是：

创建不带renderTo选项的formPanel

创建窗口并将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/

我可以将Ext.FormPanel渲染到新的Ext.window吗？

1 个答案: