如何在表单提交中包含添加到网格的文件

时间:2017-04-03 07:32:28

标签: javascript extjs

我有一个包含字段和网格的表单。

{ textfield },
{ textfield },
{ textfield },
 etc...,
{ grid with toolbar: filefield }

在网格上,我添加了一个filefield工具栏,我添加了一个更改侦听器以将文件添加到网格中:

addAttachment: function (field, value, eOpts) {
        var me = this,
            grid = field.up('grid'),
            gridStore = grid.getStore();
        gridStore.add(
            {
                filename: value,
                dateadded: new Date()
            });
    }

基本上,我想首先将附件添加到网格中,以便我可以将多个文件发送到服务器。这可能吗?

目前,执行form.getValues()只获取表单中的其他字段,而不是工具栏。获取商店项目似乎也不包含正确的文件路径,因为它们以c:\fakepath\为前缀。

我想要的是只推送所有表单值,包括Save事件中存储在网格中的所有文件。运气好吗?

1 个答案:

答案 0 :(得分:0)

确定。既然没有人回答,这就是我所做的:

首先,我使用filefield而不是在网格的tbar中使用button。我已为该按钮添加了一个点击监听器,该隐藏filefield添加到表单中:

addAttachment: function (button) {
    var me = this,
        form = button.up('form'),
        grid = button.up('grid'),
        gridStore = grid.getStore(),
        newFileField = {
            xtype: 'filefield',
            hidden: true,
            unused: true, //custom property to check if there is already an unused field
            listeners: {
                change: function (field, value, eOpts) {
                    gridStore.add(
                    {
                        filename: value,
                        dateadded: new Date()
                    });
                    field.unused = false;
                }
            }
        };

    //if there is already an unused field, we don't need to add a newField to the form
    if (!form.down('filefield[unused=true]')) {
        form.add(newFileField);
    }
    //imitate the filefield trigger. this will show the file dialog
    form.down('filefield[unused=true]').fileInputEl.dom.click();

}

这就是它。基本上,button只是模仿filefield文件对话框触发器,但实际发生的是它向表单添加了新的filefield。因此,调用form.getForm().submit()现在包括所有也在网格中的文件。

我希望将来可以帮助任何人。

<强> 干杯!