View Full Version : How to allow/stop an event based on a condition like YES or NO ?

22 Jun 2015, 11:18 PM
I need to allow or stop an event from happening, based on a given condition such as a pop up box with options YES, NO and CANCEL.

I need to notify the user saying that there are unsaved data and if the user wishes to SAVE it, IGNORE it or CANCEL his current action(event such as Selection-change or Click).

I tried to use createInterceptor() function. But could not achieve the functionality.
Can anybody give me some suggestions with example? Basically I want to know how to stop an event.

Thanks & Regards,

Mark Wagoner
23 Jun 2015, 3:33 AM
What I do is listen for the beforeClose event on the window and check for changes. If there are any then display the message and return false, which essentially ends the beforeClose event. If the user answers "yes" to the prompt then I go ahead and close the window.

Here is my beforeClose event code. The isCanceled variable is a flag I use within the controller.

beforeClose: function () {

var dirty = !this.isCanceled && this.getForm().isDirty();

if (dirty) {
Ext.Msg.confirm('Changes Made', 'Do you wish to quit without saving?', function (id) {
if (id == 'yes') {
}, this);

return false;

Within the controller's cancel function I set the isCanceld flag (so the beforeClose event will process) and close the window.

cancel: function () {
this.isCanceled = true;
var window = this.getEditWindow();
if (window)

23 Jun 2015, 1:25 PM
As mentioned above, you can use the beforeXXX events (where available) to handle this logic. In most cases, you can return false to cancel the action, which is preferable in your case.

24 Jun 2015, 2:09 AM
Thanks for replying,

I like the idea of using beforeXXX events. But I am still facing problems. As I mentioned, I need to ask the user if he wishes to save the unsaved data, which is a popup message box (With options YES, NO and CANCEL) that runs asynchronously. So by the time I get a reply, the event will have happened.

For ex. lets imagine a situation where, there is a page that displays a list of records in a grid with a pagination toolbar attached to it on the bottom(with a page size of 10 and total number pages is 10. So totally 100 records) on the left hand side. If you select a record in the list, the details are shown in a detail view on the right hand side.
1. I select third record in the list and make some changes to it in the detail view(form).

2. Without saving the record, I click on next page button on the Pagination toolbar.

3. It will show a confirm box from the beforeXXX event of Pagination toolbar, but the event will have happened anyway.

4. Here if the user clicks on CANCEL, I will have to restore the previous state which is already gone. Somehow I will have to go back and select the third record in the list of previous page.

5. So in order to resolve this problem, if I return false from my beforeXXX event, the next XXX event will be not be triggered.

6. But if the user clicks on YES or NO options I will have to trigger the event XXX manually which I am unable to do it for a selection-change event as of now.

Like this there can be many operations like list-filtering, searching, Ordering(A-Z/ Z-A), logout etc. For each of this operation I will have to write customised code which totally spoils the readability of the code.

So I was thinking if there is way to, somehow manually trigger the event XXX by holding the event object in beforeXXX...or is there any other way to restore the previous state.

Please give me suggestions....Thanks...

25 Jun 2015, 12:33 PM
The paging toolbar has events, such as beforeChange (http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.toolbar.Paging-event-beforechange) where you could put your logic to display the popup and immediately return false to cancel the paging action. At this point, the user will choose an option from the popup and depending on that action, you can programmatically move to the next page and reload the grid.

25 Jun 2015, 12:37 PM
Here's a small example, excluding the check for unsaved changes on a form: