Classic Toolkit – Close Dialog When Clicking Off

Todays programs seem to be changing with how some handle user interaction. Many applications today will close a dialog when clicking anywhere outside of the boundaries of the dialog. Code below shows how you can achieve this using Ext JS by adding a focusleave listener.

In this example a form is included to demonstrate how functionality would work using a form, demonstrating how clicking inside form fields are not addressed as if the form is outside of the window container. Inside the form is part of the window container so the user is not prompted if they are sure until the click event happens outside of the window boundaries.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.window.Window', {
            title: 'New Window',
            width: 400,
            height: 400,
            bodyPadding: '10 10 10 10',
            listeners: {
                focusleave: function (component, event, eOpts) {
                    console.log(event);
                    Ext.Msg.show({
                        title: 'Confirm Close Window',
                        msg: '<p>You clicked outside the window area and the window will now be closed.</p><p>Any informaiton you have entered will be lost.</p><p>Are you sure?</p>',
                        icons: Ext.Msg.QUESTION,
                        buttons: Ext.Msg.YESNO,
                        fn: function (ans) {
                            console.log(ans);
                            if (ans == 'yes') {
                                component.close();
                            } else {
                                component.focus();
                            }
                        }
                    })
                }
            },
            items: [{
                xtype: 'form',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Testing'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Testing'
                }, {
                    xtype: 'button',
                    text: 'Button'
                }]
            }]
        }).show();
    }
});

This is a great feature to be able to offer in some cases.

Before implementing this in your code please consider your user and what happens to the information they may have entered. Typical program design we open dialogs to give the user specific information with a focus on that information. More often than not we use a minimal amount of dialogs, typically to catch some user input, process it, then close the dialog and update the full screen view in the background.

Another word of caution here is if your planning on this in mobile platforms, understand the classic toolkit may cause unexpected results when displayed inside a mobile browser.

That all said, I hope those of you looking for a solution to close a dialog when clicking outside of the boundaries find this example useful. A Sencha Fiddle of the code above can be seen here.

Share:

Author: aallord

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.