View Full Version : Need syncronous messagebox within a beforechange event in pagingtoolbar

13 Apr 2015, 8:44 AM

Within a grid I want to display a messagebox warning when rows are selected and a page up or down is requested. If the user requests to stay on the page it shouldn't reload with the new page.

The messagebox displays but then continues with the paging request. Don't know if this is possible but figured I'd ask. Here's the code for the pagingtoolbar.

Code below
xtype: 'pagingtoolbar',
store: 'AMSProductGroups.store.details.DetailsStore',
displayInfo: true,
displayMsg: i18n.text.DisplayText,
emptyMsg: i18n.text.EmptyText,
listeners: {

'beforechange': function(me, page, eOpts) {

var grid = Ext.ComponentQuery.query('#detailsWindow grid[itemId="detailsGrid"]');
var arraySelected = grid[0].getSelectionModel().getSelection();
if (arraySelected.length != 0) {

title : 'Changes will be lost',
msg : "You've requested a different page number, you're unprocessed selections will be lost <br><br>Do you want to continue?",
buttons : Ext.MessageBox.YESNO,
//modal: true,
fn : function(btn) {
if(btn == 'yes') {
return true;
} else {
return false;
icon : Ext.MessageBox.QUESTION,
scope: this


13 Apr 2015, 8:46 AM
Correction, I meant synchronous.

13 Apr 2015, 3:39 PM
1. add single handler (single: true) to the beforechange event with messagebox and return false after messagebox init.
2. on 'Yes'-case pragmatically change the page (store it before somewhere) and goto #1
3. on 'No'-case goto #1

1. add allowPageChange: false showChangePopup: true
2. on your popup 'Yes' click set it true, on 'No' false and showChangePopup to false
3. in the handler return this.stopBeforeChange and show your popup depends on showChangePopup
4. in the change event handler set showChangePopup to true again