View Full Version : Proper Way To Prevent Paging Toolbar To Go To Next Page If Dirty Records Exist?

27 Sep 2013, 10:30 AM
*** ExtJS 4.0.7 ***

A user makes changes to a grid with cellediting. They press "next page" on the paging toolbar. I am trying to pop up a window that warns them that they are about to change pages without having saved their changes. If they press Yes, then the changes are discarded and the user is taken to the next page. If they press No, then they stay on the same page.

I tried tapping into the beforechange event on the toolbar plugin. It is definitely firing. I tried tapping into the suspendEvents(true) method of the pagingtoolbar. I thought this would allow me to pop up a messagebox to return true or false depending on the user's response, and in essence, prevent the pagingtoolbar from loading the next page.

xtype: 'pagingtoolbar',
plugins: [new myCustom.plugin.PagingToolbarSlider()],
store: priceDataStore, // same store GridPanel is using
pageSize: 25,
dock: 'bottom',
displayInfo: true,
listeners: {
beforechange: function(pagetoolbar, page, eOpts) {


var unsavedChanges = false;

// updated "calculated" fields (margins)
for (var i = 0; i < pagetoolbar.store.data.items.length; i++) {
if (pagetoolbar.store.data.items[i].dirty) {

// flag unsavedChanges
unsavedChanges = true;

// force loop to end
i = pagetoolbar.store.data.items.length;

if (unsavedChanges) {
'Unsaved Changes Alert',
'You have unsaved changes. These changes will be lost if you continue. Do you wish to continue?',
function(button,text) {
if (button === 'yes'){
return true;
if (button === 'no' || button === 'cancel') {
return false;


This does not seem to work. The pagingtoobar continues to load the next page regardless if I suspend events.

30 Sep 2013, 3:47 AM
Well, suspendEvents doesn't prevent component from working. it just disables events.
Instead, you should return false from your handler when you want to prevent page change.

30 Sep 2013, 6:20 AM
The reason I wanted to suspend events was to prevent any other events from triggering so that I can give the user time to respond to the message. Am I thinking about this wrong?

30 Sep 2013, 6:30 AM
if you are not bound to using an ExtJS message box for asking the user, you can use window.showModalDialog() to create a browser popup. this blocks execution of Javascript and when you return from the dialog, you can choose to continue or cancel going to the next page.

30 Sep 2013, 10:18 AM
If you return false, you cancel the current execution chain. So, to resume, you need to call .loadPage(page) yourself.

30 Sep 2013, 11:04 AM

thanks for your answer. of course it ended up being something as natural as forcing a page reload after returning false if certain conditions are met (ie. the user requesting to continue to the next page).