Ext JS 4: When you want the message box to stop processing

As you know, the Ext JS message box does not stop the flow in your app. Here is a pattern that can be used to stop or continue the flow as needed. My example is on a listener for a grid beforeselect event.

myEventHandler : function (rowModel, rec) {
	if (this.canContinue) {
		this.canContinue = false;
		return true;
	} else {
		if (this.down('#myForm').getForm().isDirty()) {
			Ext.Msg.confirm("Save Changes?",
				"There are unsaved changes.  Save them?",
				function(buttonId) {
					if (buttonId === 'no') {
						// User wants to discard changes and continue.
						// Set the flag to true and then call the action
						// a second time.  This time the action will go thru.
						this.canContinue = true;
						rowModel.select(rec);
					} else {
						this.canContinue = false;
					}
				},
				this
			);
			return false;
		}
		return true;
	}
}

This pattern is from Condor and is posted in this forum thread: MessageBox.confirm doesnt stop in some cases

Advertisements

6 comments

  1. Hi,

    I have a listener setup on parent combox where on select of any option i am doing a recursive loop in a parameter data store to pick up the one or more parameters where for some of them i need to ask for user input.
    For every parameter which are flag as Dialog i need to show a Window/Form to allow the user to do input as value for that specific parameter.
    After closing the window the loop needs to continue to pick up the next parameter.
    Before opening of the Window/Form i want to stop the flow of the app and process all the parameters with the type set as Dialog. When the looping finish the app flow can continue.

    Is it possible to realise this with the code above?

    Any advice or help will be much appreciated!

    Thx.

    Anibal

    1. It’s hard to tell from what you wrote, but it seems like maybe you want to iterate through all your parameters and gather the list of input fields to present in one modal dialog. Otherwise, it seems like the user experience would be slightly annoying to keep getting a pop-up. But yes, it seems that you could do something similar as in the post to get all the input entries before continuing with your workflow.

  2. Hi,

    I am able to collect all the parameters and after this to show the message box.
    Where in the code above could i insert the code below?

    Ext.MessageBox.show({
       title:    'Verification',
      msg:      'Please approve by checking the box below.<br />
                   <br /><input id="process all as one" type="checkbox" />
                   <br/><input id="approval" type="checkbox" />  I approve this change',
       buttons:  Ext.MessageBox.OKCANCEL,
       fn: function(btn) {
           if( btn == 'ok') {
              if (Ext.get('approval').getValue() == 'on'){
    		Ext.MessageBox.alert('Demo', 'Approval acquired');
    	  } else
             { Ext.MessageBox.alert('Demo', 'Approval not acquired');	 }
        	  }
        }
     });
    

    Thx.

    Anibal

  3. Hi,

    I also have tried the modal window.
    My problem is more to be able to stop and continue the app flow!

    In your posted code where is the canContinue be initialized?
    And which part in the code will stop app flow?

    Let me know.

    Thx.

    Anbal

    1. In my situation, the message box was shown in an event listener for the grid select event. The Ext JS documentation says this for the “beforeselect” event: Fired before a record is selected. If any listener returns false, the selection is cancelled.. Therefore, my event handler sometimes returns true, to allow process to continue, and sometimes return false, to stop processing. canContinue is a variable that is initialized when it is needed. Try reading the linked forum post, maybe that will help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s