Wednesday, April 9, 2014

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:
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;
};

No comments: