CODEWITHSUNDEEP
extjs
Hemant Kumar
Hemant Kumar

Reputation: 616

Close Ext.Window from child html

I am new to ExtJS.

This is my window definition :

this.dialog = new Ext.Window({
title : "About us",
layout  : 'anchor',
modal   : true,
autoEl : {
        tag : "iframe",
        id: "myframe",
        src : "../editor/actorseditor.html",
        height: 500,
        width : 600
} });   
this.dialog.show();

I want to close my dialog window from "actorseditor.html".

How to achieve this. Also the opened window is not having close button.

Thanks in advance

Upvotes: 1

Views: 3671

Answers (3)

Bae Cheol Shin
Bae Cheol Shin

Reputation: 1528

Please try following inside your close button listener:

var parentDialogWindow = window.parent.Ext.cmp('ID_OF_DIALOG_WINDOW');
parentDialogWindow[parentDialogWindow.closeAction]();

Upvotes: 0

dbrin
dbrin

Reputation: 15673

This will only work if the html page in your iFrame is from the same application as your parent page. Or at least the protocol, subdomain, domain and port are all the same.

You will need to expose a global function in your parent page that will be called by the JavaScript running in the child page (iframe).

In your child page you call: 

 if (window.parent && window.parent.myGlobalFunction) {
       window.parent.myGlobalFunction('hello!');
  }

In your parent page you include the following global function (name it as you wish of course):

function myGlobalFunction(input){
        console.log('message received:'+input);
        MyApp.app.fireEvent('closeMyWindow',input);
    }

This assumes that you are using MVC and you created property 'app' and set it to 'this' in the application launch function. And that you have a controller that is listening for aplication wide event like this:

Ext.define('MyApp.controller.Qnum', {
    extend:'Ext.app.Controller',
    init:function(){
        this.control({
            ...
        });
        //listen for app wide event fired by : MyApp.app.fireEvent('closeMyWindow',input);
        this.application.on({
            closeMyWindow: this.closeWindowItsDrafty,
            scope: this
        });
    },
    closeWindowItsDrafty:function(){
       //get reference to my window
       //call myWindow.close();
    }

Upvotes: 1

Carlos Valenzuela
Carlos Valenzuela

Reputation: 834

I'll assume that in actorseditor.html, you must have a button

In this button you can set this listener:

listeners : {
    click : function () {
         Ext.getCmp('yourdialogid').close();
    }
}

You also need to put an id to your dialog box.

Upvotes: 0

Related Questions