How can I get user confirmation in a combobox change event in ExtJs?

Question

I have combos in my extjs application and I want to show 'Are you sure?' confirm the window to the user and prevent the change if the user says no.

Since the JavaScript confirmation window is synchronous, it works correctly. But using Ext JS, a confirmation message is displayed, and the rest of my code will be executed before the user responds. Here is my code:

// JavaScript confirm box { xtype: 'combo', ... ... ... listeners: { beforeselect: function(combo, record, index ) { if(confirm('Are you sure ?') == false) { return false; // prevent combo from changing } // else continue } } } // Ext JS message box (to confirm) { xtype: 'combo', ... ... ... listeners: { beforeselect: function(combo, record, index ) { Ext.Msg.show({ title: 'Warning', msg: 'Are You Sure ?', buttons: Ext.Msg.YESNO, fn: function(btn) { if (btn == 'yes') { // continue and set new value on combo } else if (btn == 'no') { // prevent combo from changing } } }); } } } 

The problem is that Ext.Msg.show receives the callback function and does not wait for the user to respond, and we cannot prevent the change of lists with the list.

What should I do?

Answer 1

To undo a change with a list, the beforeSelect must return false. My suggestion:

 beforeselect: function(combo, record, index ) { Ext.Msg.show({ title: 'Warning', msg: 'Are You Sure ?', buttons: Ext.Msg.YESNO, fn: function(btn) { if (btn == 'yes') { // Here we have to manually set the combo value // since the original select event was cancelled combo.setValue( /* whatever value was selected */ ); } else if (btn == 'no') { // Don't do anything because the select event was already cancelled } } }); // Cancel the default action return false; } 

ExtJS Modal does not stop the execution of the script as a native dialog, which means that the beforeSelect listener returned before the user action. The way this code works is that the select event is stopped immediately and a dialog box is shown. When the user selects yes, then the value in the combo is programmatically set in the callback function.