ExtJS Button - Confirm when using HREF
ExtJS4 buttons (Ext.button.Button) have the properties 'href' and 'hrefTarget' to allow a button to act more naturally like a hyperlink. However, I had the need to display a confirmation dialog (under certain conditions) before navigating away from the page. This code feels a bit hacky but it works. The most pertinent thing to mention is that the 'allowDefault' property is not an ExtJS property so by using it, it _might_ be subject to a conflict in later versions of ExtJS. Constructive feedback and questions are welcome.
This is the relevant stack:
Simply install this function as the click listener (not to be confused with the 'handler' property, which may work but is untested by me):
This is the relevant stack:
ExtJS 4.2
Simply install this function as the click listener (not to be confused with the 'handler' property, which may work but is untested by me):
var button = Ext.create('Ext.button.Button', { text: 'Back to ...' ,iconCls: 'clsActionBack' ,disabled: false ,href: 'href-goes-here' ,hrefTarget: '_self' ,listeners: { click: the_following_function } ,handler: function() { } ,scope: this }); var the_following_function = function(btn, e, eOpts) { if (btn.allowDefault) { // nothing special to do; will fall thru to return true } else { var isdirty = some_boolean_logic_or_function_here(); if (isdirty) { e.preventDefault(); Ext.Msg.confirm( 'Confirm' ,'Do you want to leave this page without saving your changes?' ,function(id, value) { if (id === 'yes') { btn.allowDefault = true; btn.btnEl.dom.click(); } } ); Ext.Msg.setY(25); // (optional) reposition the msgbox return false; } } return true; };
Comments