View Full Version : Confirmation message to save changes before closing a window

31 Oct 2014, 2:07 PM
Hello all,

I have an editable window. When the user tries to close the window, I need to check if any changes are made in the window. If there are no changes, the window should close. If there any changes I need to prompt the user if the changes needs to be saved. If the user says yes, the changes will be saved and window closes else the window closes without the changes. For this I wrote my code in the controller layer of my code. When the user clicks on the close button in the window, everything is working fine as expected. But the problem comes only when the user tries to close the window by clicking the default [X] in the upper right corner of the window. I am trying to call my method when user clicks on this but due to the async nature of extjs the window closes initially and then the method gets called. I tried using the beforeclose event but of no use.

Here is my piece of code in the view layer.

extend: 'Ext.window.Window',

requires: [
cls:'windowPopup myDetail',
title : 'ABC Detail',
layout: 'fit',
minimizable: true,
maximizable: true,
constrain: true,
controller: null,
initComponent: function() {
this.items = [ --------------------- ]
this.setTitle('ABC Detail - ' + this.config.myDetail.referenceNum);
var userNotification = '';
var bodyStyle = 'color: #000000;'
this.dockedItems = [
xtype: 'toolbar', dock: 'bottom', ui: 'footer',
items: [
iconCls: 'icon-save',
itemId: 'updateAndClose',
text: 'Update & Close',
action: 'updateClose'
iconCls: 'icon-reset',
text: 'Update',
action: 'update',
itemId: 'update'
iconCls: 'icon-reset',
itemId: 'composeEmail',
text: 'Compose Email',
action: 'composeEmail'
iconCls: 'icon-reset',
text: 'Refresh',
action: 'refresh',
itemId: 'refresh'
iconCls: 'icon-reset',
text: 'Close',
scope: this,
itemId: 'closeBtn'
] }];
this.controller = Ext.create(XYZ.controller.mydetail.myDetailController', {view:this,identifier:this.identifier}); }
I am handling the buttons in the contoller layer, so if a user clicks on the close button then the contoller will check if any changes are made and then acts accordingly.

In the contoller, I am using the

this.on('closeBtn', 'click', this.confirmSaveBeforeClose, this);
this.on(null, 'close', this.confirmSaveBeforeClose, this);

Here the closeBtn event works fine but the problem comes only with the default windows close option.

Can someone give me an idea of how I can point to the method in the contoller when the user clicks on the [x] button as well.

1 Nov 2014, 1:24 PM
>>> tried using the beforeclose event but of no use.

Did you return false in the event to negate the close?

3 Nov 2014, 11:12 AM
Hello Scott,

Apart from the return false statement, what else should I have in the beforeclose listener.

listeners: {
beforeclose: function(w) {
/*if (!w.pendingClose) {
w.pendingClose = true;
*//* Ext.Msg.confirm('Foo', 'Bar', function(btn) {
if (btn === 'yes') {
} else {
delete w.pendingClose;

this.raise('checkBeforeClose', null, this.identifier);*/
return false;
// }
delete window.pendingClose;

If I just have the return false statement, it returns false and is stopping at that point and nothing is happening. If I have the message box to pop up saying "Do you want to save the changes" in the listener itself, how should I be handling the flow to move to the controller if the user clicks 'Yes'. I have all my save logic in the controller.

I tried it this way. If the user clicks on 'Yes', then
this.raise('checkBeforeClose', null, this.identifier); and in the controller I am observing this event as

this.observe("checkBeforeClose", this, this.confirmSaveBeforeClose, this.identifier);
But this is not working for me. Getting this.raise is not a function error.

Am I missing something here?.