Question

我们有一个表单面板，其中包含一个可编辑的网格和一个“保存”按钮。

PROJ.RWA = Ext.extend(Ext.form.FormPanel, 
{

    initcomponent:function(){
....
.....

var rwa_config = {
        ....... 
        tbar:rwa_tbar,
        items: [
            borr_grid, nonBorr_grid
            ],
        buttons: [{
                text: 'Save',
                handler:this.getValues
        },
        .....]
        .......             
    };

  Ext.apply(this, Ext.apply(this.initialConfig, rwa_config));
  PROJ.RWA.superclass.initComponent.call(this, rwa_config);
     }

}

此组件从index.html加载我们需要确保用户在离开此面板时收到警告，如果网格上有未保存的更改。
如果网格“脏”并且尚未点击“保存” - 我们应该在用户导航到其他页面/面板时弹出警告。
我们怎么做？

Answer 1

您可以为事件beforedestroy添加一个监听器，或者如果它正常关闭，那么请查看beforeclose。

它看起来像这样：

listeners: {
    beforedestroy: function( panel, eOpts ){
        //check if there are unsaved changes (and show dialog or smoething)
    }
}

您也可以在＆＃34;之前的＃34; -event中return false;来阻止实际操作。

另请查看beforedestroy doc。

Answer 2

首先：我想当点击保存时，你会调用一个返回成功的操作：true。然后，商店中的所有记录都标记为“不脏”。

因此，您只需要检查网格是否有脏记录。

根据您“离开”网格的确切方式，您可以收听以下一个或多个事件：

beforeclose
beforedestroy
beforehide

在处理程序中，你会这样做：

onGridExit:function(grid) {
    if(grid.getStore().getUpdatedRecords().length>0) {
        Ext.MessageBox.alert('Unsaved changes','Would you like to save your changes?',function() {
            ...
        });
        return false;
    }
}

捕获FormPanel退出

2 个答案: