EXTJS Ajax request and Content-Disposition attachment

Question

I want to get a watingmessage in extjs while loading a link. The response is a binarycode, which I want to downlad. The link is for example "test.php".

    function loadurl(link){

Ext.MessageBox.wait('Loading ...');
Ext.Ajax.request({
    url: link,
    callback: function(options, success, response){
        Ext.MessageBox.updateProgress(1);
        Ext.MessageBox.hide();
        if (success) {
            // response : my attachment
        }
        else {

        }
    },
    scope: this
});

}

          {
                 ...


 //functioncall    
             loadurl('test.php');
      }

I also tried in test.php.

       <?php
          header('Content-Disposition: attachment; filename="'.$filename.'"');
          echo $content;
       ?>

But it doesnt work. If I just load the link it works, but without waiting message.

Answer 1

In the ExtJS Documentation there is a class called LoadMask which is designed to show a loading 'spinner' along with a short message. In your case, you would use it like this:

function loadurl(link){
    var mask = Ext.LoadMask(Ext.getBody(), {msg:"Loading..."})
    mask.show();
    Ext.Ajax.request({
        url: link,
        callback: function(options, success, response){
            if (success) {
                // response : my attachment
            }
            else {

            }
            //do whatever work we need to do, then hide the mask
            mask.hide()
        },
    scope: this
});

However, if, for whatever reason, the callback comes back almost immediately, then it is possible that the mask will not be visible because your file loaded too fast. If this is an issue, you could force a delay by putting your Ajax request inside a setTimeout .