正文

如何正确处理EXT JS窗口的关闭事件，避免数据丢失和程序异常

/0 浏览量
0408

在EXT JS中，窗口的关闭事件处理是确保用户体验和数据完整性的关键环节。当用户尝试关闭一个窗口时，我们需要确保以下两点：

  1. 如果窗口中有未保存的数据，给予用户保存的机会。
  2. 确保关闭操作不会导致程序异常。

以下是如何实现这些功能的详细步骤和代码示例。

1. 监听窗口关闭事件

首先，我们需要在窗口中监听关闭事件。这通常通过在窗口配置对象中设置listeners属性来实现。

Ext.create('Ext.window.Window', {
    title: 'Example Window',
    width: 400,
    height: 300,
    closable: true, // 允许窗口关闭
    listeners: {
        close: function(window) {
            // 处理窗口关闭事件
        }
    },
    items: [
        // 窗口内容
    ]
});

2. 检查未保存的数据

在关闭事件处理函数中，我们需要检查是否有未保存的数据。这通常涉及到检查表单字段或模型数据。

close: function(window) {
    var form = window.down('form'); // 假设窗口中有一个表单
    if (form) {
        var hasChanges = form.isDirty(); // 检查表单是否有未保存的更改
        if (hasChanges) {
            Ext.Msg.confirm('未保存的更改', '您有未保存的更改。是否保存？', function(buttonId) {
                if (buttonId === 'yes') {
                    form.save(); // 保存表单数据
                } else {
                    window.destroy(); // 如果用户选择不保存，则销毁窗口
                }
            });
        } else {
            window.destroy(); // 如果没有未保存的更改，则销毁窗口
        }
    } else {
        window.destroy(); // 如果没有表单，则销毁窗口
    }
}

3. 防止程序异常

确保关闭操作不会导致程序的其他部分出现问题。以下是一些预防措施：

  • 在关闭事件处理函数中，避免调用可能导致程序异常的方法。
  • 如果窗口关闭与某些操作相关联，确保在关闭之前完成这些操作。
  • 在关闭窗口之前，检查并清理所有相关的资源。
close: function(window) {
    // 清理资源
    var someResource = window.someResource;
    if (someResource) {
        someResource.destroy();
    }

    // 检查未保存的数据
    // ...
}

4. 示例代码

以下是一个完整的示例，展示如何在EXT JS窗口中处理关闭事件：

Ext.create('Ext.window.Window', {
    title: 'Example Window',
    width: 400,
    height: 300,
    closable: true,
    listeners: {
        close: function(window) {
            var form = window.down('form');
            if (form) {
                var hasChanges = form.isDirty();
                if (hasChanges) {
                    Ext.Msg.confirm('未保存的更改', '您有未保存的更改。是否保存？', function(buttonId) {
                        if (buttonId === 'yes') {
                            form.save();
                        } else {
                            window.destroy();
                        }
                    });
                } else {
                    window.destroy();
                }
            } else {
                window.destroy();
            }
        }
    },
    items: [
        {
            xtype: 'form',
            bodyPadding: 10,
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    name: 'name'
                },
                {
                    xtype: 'button',
                    text: 'Save',
                    handler: function() {
                        this.up('form').save();
                    }
                }
            ],
            save: function() {
                var form = this;
                var values = form.getValues();
                // 保存数据到服务器
                Ext.Ajax.request({
                    url: '/saveData',
                    method: 'POST',
                    params: values,
                    success: function(response) {
                        Ext.Msg.alert('Success', 'Data saved successfully.');
                        form.reset();
                    },
                    failure: function(response) {
                        Ext.Msg.alert('Error', 'Data save failed.');
                    }
                });
            }
        }
    ]
});

通过以上步骤，你可以有效地处理EXT JS窗口的关闭事件，避免数据丢失和程序异常。

-- 展开阅读全文 --