Results 1 to 6 of 6

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

  1. #1

    Default Answered: How to allow/stop an event based on a condition like YES or NO ?

    Hi,
    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,
    Rakesh

  2. Here's a small example, excluding the check for unsaved changes on a form:


  3. #2
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    159
    Answers
    5

    Default

    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.

    Code:
        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.cancel();
                    }
                }, this);
    
                return false;
            }
        }
    Within the controller's cancel function I set the isCanceld flag (so the beforeClose event will process) and close the window.

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

  4. #3
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    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.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  5. #4

    Default

    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.
    Now,
    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...

  6. #5
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    The paging toolbar has events, such as 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.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  7. #6
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Here's a small example, excluding the check for unsaved changes on a form:

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

Similar Threads

  1. One off message, based on condition
    By riyaad in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 3 Jun 2012, 11:48 PM
  2. disbale button based on condition
    By newsam in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 18 Nov 2011, 2:26 AM
  3. Disabling a row in a grid based on a condition.
    By prext in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 19 Sep 2008, 2:31 AM
  4. Display based on condition
    By hiral in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 20 Jun 2008, 2:28 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •