Extjs window waiting dialog closing problem

Dear Friends.i am facing a problem upon closing my window.I calling an ajax call like this

function callPreviewWindow(){   
    $.ajax( {
    type : "GET",
    url : "/ajax/eform/preview.do",
    cache : false,
    dataType : "text/html",
    timeout: 40000,
              beforeSend : function() {
        showWaitingDialog("Please wait...");
    },

    error: function (xhr, err)
    {
        resolveAjaxError(xhr, err);
    },
    success : function(data) {  
         showPreviewWindow(data);

    }
 });    

}

But this ajax call execution taking more time so increased timeout to 40000. and it is working fine and displaying the following window.

function showPreviewWindow(htmlData){
var previewWindow =  new Ext.Window({
        title: "E-Form View",  
        width:650,
        id:'previewWindow',
        autoHeight: true,
        html: htmlData,
        modal: true,
        y: 150,
        listeners: { 
        beforeclose: function () { 
            searchVisible = false;                      
          } 
        },
      buttons: [
                 { 
                     text: 'Close', handler: function() {
                      previewWindow.close();                                            
                     }
    开发者_运维知识库             }
                ]
 });

previewWindow.show(this);               

}

But the problem is when click on the close Button, I can able to close the window. But the showWaitingDialog ( which i called on before send event in the ajax call function) is not closing.

Please help me to close this also on close button click.

Thanks in advance. Sathya

It looks like the dialog and the window are not linked. So in your close handler you will need to also dismiss the dialog, as well as your window. How you do this will depend on what the showWaitingDialog() function is doing - but you'll probably need to store a reference to the dialog that is created in that method, then in your close handler call a method on your dialog (like dialog.close()) to dismiss that too. This may require you to modify the showWaitingDialog() method to return a reference to the dialog:

function showWaitingDialog() {
    // dialog is created as normal

    // add something like this
    return dialog;
}

Then modify your dialog launcher and close handler to use stored dialog:

// Dialog reference will be stored here    
var dialog;

function callPreviewWindow(){   
    $.ajax( {
        type : "GET",
        url : "/ajax/eform/preview.do",
        cache : false,
        dataType : "text/html",
        timeout: 40000,
        beforeSend : function() {
            // Store reference
            dialog = showWaitingDialog("Please wait...");
        },
        error: function (xhr, err) {
            resolveAjaxError(xhr, err);
        },
        success : function(data) {  
            showPreviewWindow(data);
        }
    }); 
}

function showPreviewWindow(htmlData){
    var previewWindow =  new Ext.Window({
        title: "E-Form View",  
        width:650,
        id:'previewWindow',
        autoHeight: true,
        html: htmlData,
        modal: true,
        y: 150,
        listeners: { 
        beforeclose: function () { 
            searchVisible = false;                      
          } 
        },
        buttons: [{ 
            text: 'Close', handler: function() {
                previewWindow.close();
                dialog.close();                                            
            }
        }]
    });

    previewWindow.show(this);     
}