View Full Version : Asynchronous call during tab change

31 Dec 2014, 3:56 AM
I am using 2 tabs on a screen - Tab1 and Tab2; with both having separate form fields and save buttons.

If the user changes anything on Tab1 and clicks on Tab2, the user should be prompted to save the values and then go to the tab 2. I am using the SuspendLayout for that when the message has to be displayed.

The problem is that the control is coming to this Ext.Msg but before the control could stay it goes to Tab 2's controller, so even if when the error message is displayed, in the background the control has already gone to Tab 2.

Please guide how to handle the asynchronous call i.e. I want the control to go to Tab2's controller only when all the processing of Tab1's controller is successfully done.


Gary Schlosberg
31 Dec 2014, 11:28 AM
What event are you using to start prompting the user?

31 Dec 2014, 4:30 PM
If I understand you correctly, then you must manually control the setting of the active tab sequentially through the async callback functions. Ext.Msg calls are also async components.

Hopefully, this fiddle demonstrates the concept. While I do not have an async call expect for the message box, I did put a comment in where I would handle such a call. I am using the Tab Panel's beforetabchange event to handle the MessageBox display and control whether or not to allow the tab change (via a custom 'validate' attribute on the 'selected tab'; this is because the event is triggered again when setActiveTab method is manually called to actually change the tab).

Hopefully this helps.