ExtJS：窗口中表单面板数据无法随主表单提交的问题排查

我之前也碰到过类似的场景，核心问题在于弹窗里的type_form是独立的表单组件，不属于主表单big_form的子项，而ExtJS表单默认只会收集自身items下所有字段的值，所以提交big_form时自然不会带上弹窗里的数据。下面给你几个可行的解决方案，包括你提到的hiddenfield关联的正确用法：

方法一：提交时手动合并子表单数据 #

这是最直接的方式，在主表单提交前，主动获取弹窗表单的字段值，合并到主表单的提交参数中：

// 假设big_form是你的主表单实例，type_form是弹窗里的表单
big_form.getForm().submit({
    url: 'your-submit-url',
    params: {
        // 手动添加type_form的所有字段值
        ...type_form.getForm().getValues()
    },
    success: function(form, action) {
        // 处理成功逻辑
    },
    failure: function(form, action) {
        // 处理失败逻辑
    }
});

注意：针对filefield的特殊处理 #

如果type_form里包含filefield，上面的方法只能拿到文件名，无法上传文件（因为文件数据需要通过表单的multipart/form-data编码提交）。这种情况下，你需要确保filefield最终属于主表单的DOM结构里，或者用下面的方法二。

方法二：将弹窗表单作为主表单的隐藏子项，动态渲染到弹窗 #

这种方法让type_form本质上还是big_form的子组件，只是默认隐藏，点击按钮时把它渲染到弹窗中，这样提交时会自动包含它的数据：

1. 初始化时把type_form加入big_form的items，并设置hidden: true：

Ext.create('Ext.form.Panel', {
    id: 'big_form',
    items: [
        // 主表单原有字段
        { xtype: 'textfield', name: 'main_field' },
        // 弹窗里的表单，默认隐藏
        {
            xtype: 'form',
            id: 'type_form',
            name: 'type_form',
            hidden: true,
            items: [
                { xtype: 'filefield', name: 'upload_file' },
                { xtype: 'textfield', name: 'type_info' },
                // 其他字段...
            ]
        }
    ]
});

2. 点击按钮弹出窗口时，把type_form移到弹窗的items中并显示：

Ext.create('Ext.window.Window', {
    title: '弹窗表单',
    items: [Ext.getCmp('type_form')], // 直接引用主表单里的type_form
    buttons: [
        {
            text: '关闭',
            handler: function() {
                this.up('window').close();
                // 关闭后把type_form放回主表单并隐藏
                Ext.getCmp('big_form').add(Ext.getCmp('type_form'));
                Ext.getCmp('type_form').hide();
            }
        }
    ]
}).show();
// 显示弹窗时显示type_form
Ext.getCmp('type_form').show();

这样type_form始终属于big_form的子组件，提交主表单时会自动收集它的所有字段（包括filefield）的数据，完美解决文件上传的问题。

关于hiddenfield与filefield的关联 #

你提到尝试用hiddenfield关联，但没解决问题。其实hiddenfield主要用于存储文本类数据，不能直接关联filefield的文件内容（因为浏览器安全限制，JS无法直接读取文件内容或设置filefield的value）。

如果只是需要记录文件名，可以在filefield的change事件中把文件名同步到hiddenfield：

{
    xtype: 'filefield',
    name: 'upload_file',
    listeners: {
        change: function(field, newValue) {
            // 提取文件名
            var fileName = newValue.split('\\').pop();
            // 同步到hiddenfield
            Ext.getCmp('file_name_hidden').setValue(fileName);
        }
    }
},
{
    xtype: 'hiddenfield',
    id: 'file_name_hidden',
    name: 'file_name'
}

但要注意：这种方式只能提交文件名，文件本身还是需要filefield属于主表单才能上传，所以如果有文件上传需求，还是推荐方法二。

内容的提问来源于stack exchange，提问作者Capdi