Opening single instance of a child window and bringing the focus back on the parent window

Problem Statement

Many times you will have a situation where two different web applications or web-pages are built on common data and they may have a need to interact with each other. Also, you may have further dependency where you may be launching an application (child application) from a given application (parent application). In such cases, one of the common need is to ensure that the single instance of the child window opens when the user is clicking on the launch specific link / button.

Also, occasionally, you may have a need to show a confirmation message when one or more child window is open. Or, business may ask you to close the child window when the user closes the parent window.

This article uses two dummy projects (created using ExtJS) as examples to demonstrate how you will be able to control one application from the other application, bring them into front and close the child window when the parent window is closed.


It is being assumed that you are familiar with ExtJS and you have created a project using Sencha Architect. The code in this article will talk about  specific views, which allows you to click on button to access parent / child windows.

How to do?

Main Application

This application allows user to click on “Launch child window” button which launches the second / child application. Following is the code for the view:

The button handler has following statements, which you would like to notice

  • A name for the main window
  • Creation of new instance when
    • A check for the existence of the childWindow
    • Verification of whether the child window is open or not
      • While you do intend to open a single instance, it is possible that child window might have been manually closed by the user. Hence in such case you shall create a new instance.
  • Bring the already open child window into focus

Child / Other Application

In the child application the view being demonstrated primarily consist of a button, “Back to parent”, which takes the user back to the parent window. Following is the code for the view:

The button handler has following statements, which you would like to notice:

  • Open the parent window by the name
  • Focus on the parent window to bring it in the front

Closing Child Window

There are situations when you would like to close a child window when the parent window is being closed. Also, you may need to be aware of the fact that the parent window may get closed due to many reasons. Some of the reasons are listed below:

  • Navigating to another page directly in the browser or via a link.
  • Closing the current browser window or tab page.
  • Reloading the current page.
  • Manipulating the URL of the currently loaded page through the location object from JavaScript.
  • Invoking the window.navigate method.
  • Invoking the or the method to open a document in the same window

Whenever there is an attempt to close or move away from the current page, there are two events that get fired in following order

  1. beforeupload
  2. unload

The window object’s beforeunload event can be used for handling any specific need of resolving anything between the parent and child window. This event occurs before the browser unloads the document. You would like to note that the onbeforeunload event is not cancelable, because of security reasons. Inside the handler of this event, optionally you may like to do one of the following:

  1. Display a confirmation dialog by returning a string value, where the user can confirm whether he wants to stay or leave the current page
  2. To execute certain logic before closing the window
  3. Combination of 1 & 2

Following code shows a sample example for handling this specific situation where an open child window is being closed whenever the parent window gets closed:


The solution listed in this article does have certain limitation. For example

  • If you can launch parent window from different tabs / windows then you will have to handle things differently to ensure one-to-one binding
  • The single instance logic will work within the same browser
  • The onunload event is supported in IE, Firefox, and Safari, but not supported properly in Chrome or Opera.


As part of this article you came to know about the ways to work with multiple pages / windows where one window may be dependent on the other window. Also, you came to know about closing the child window before closing the parent window. I hope this article helps you to manage two or more applications with dependencies similar to the one mentioned in this article.

At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.



Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.