可拖动的表单面板不能正确销毁

Question

我有一个网格，其中包含一家商店的记录，该商店使用 ExtJS 7.2 上的现代 material 主题。我想从该视图创建多个浮动的、可拖动的表单面板，但是当我拖动表单面板时，关闭它会在表单面板所在的位置留下空白 space，遮挡背景。这是表单面板的来源。

onItemClick: function (grid,rowIndex,e) {
    var record = grid.getStore().getAt(rowIndex);
    var form = Ext.create({
        xtype: 'formpanel',
        id: `${record.id}_form_${record.get('blah')}`,
        title: `Invoice ${record.get('blah')}`,
        floating: true,
        closable: true,
        centered: true,
        draggable: true,
        shadow: true,
        width:300,
        height:window.innerHeight*0.8,
        scrollable: true,
        modal: null,
        items: [
            {
                xtype: 'textfield',
                name: 'Blah',
                label: 'Blah',
                value: record.get('blah'),
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [{
                    xtype: 'button',
                    text: 'Save',
                    ui: 'raised round',
                    iconCls: 'x-fa fa-save',
                    handler: function() {
                        var theform = this.up('formpanel').getFields();
                        record.set(
                            {
                                'blah': theform['Blah'].getValue(),
                            }
                        );
                        this.up('formpanel').destroy();
                    }
                },'->', {
                    xtype: 'button',
                    text: 'Cancel',
                    ui: 'raised round',
                    iconCls: 'x-fa fa-close',
                    handler: function() {
                        this.up('formpanel').destroy();
                    },
                }]
            }
        ]
    });
    Ext.Viewport.add(form);
}

有人遇到过这个问题吗？我试过弄乱自定义 Ext.drag.Source 对象，但到目前为止没有成功。当我尝试关闭已拖动的表单面板时，出现错误：

TypeError: Argument 1 of Node.replaceChild is not an object.

如有任何帮助，我们将不胜感激。

Answer 1

在现代工具包中没有属性称为 "floating"。您是说 "floated" 吗？
与其添加到视口，不如使用 show() 方法。

像这样：

onItemClick: function (grid,rowIndex,e) {
    var record = grid.getStore().getAt(rowIndex);
    var form = Ext.create({
        xtype: 'formpanel',
        id: `${record.id}_form_${record.get('blah')}`,
        title: `Invoice ${record.get('blah')}`,
        floated: true, // It is not called "floating"
        closable: true,
        centered: true,
        draggable: true,
        shadow: true,
        width:300,
        height:window.innerHeight*0.8,
        scrollable: true,
        modal: null,
        items: [
            {
                xtype: 'textfield',
                name: 'Blah',
                label: 'Blah',
                value: record.get('blah'),
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [{
                    xtype: 'button',
                    text: 'Save',
                    ui: 'raised round',
                    iconCls: 'x-fa fa-save',
                    handler: function() {
                        var theform = this.up('formpanel').getFields();
                        record.set(
                            {
                                'blah': theform['Blah'].getValue(),
                            }
                        );
                        this.up('formpanel').destroy();
                    }
                },'->', {
                    xtype: 'button',
                    text: 'Cancel',
                    ui: 'raised round',
                    iconCls: 'x-fa fa-close',
                    handler: function() {
                        this.up('formpanel').destroy();
                    },
                }]
            }
        ]
    });
    form.show(); // Show instead of add to Viewport.
    //Ext.Viewport.add(form);
}

可拖动的表单面板不能正确销毁

Draggable formpanels don't destroy properly

extjs

extjs-form

extjs7