ExtJS 4 Download File Button

Here’s a bit of undocumented goodness. In this tutorial we’ll set up an ExtJS 4 button to act just like a link that pops up in new window:

<a href="..." target="_blank"/>

This is useful if you have a web application where the user never navigates away from the page and everything works over AJAX. If you simply have an ExtJS4 button and try to open a file download via JS, you will have low browser support due to popup blockers, etc. If you’re thinking of styling a link like an ExtJS 4 button – try it, if you got an hour.

FULL SOURCE & DEMO @ JSFIDDLE

The magic is in the undocumented attributes target and hrefTarget:

{
    xtype: 'button'
    , icon: 'https://whatisextjs.com/BAHO/icons/disk.png'
    , text: 'Download'
    , href: 'http://WhatIsExtJS.com'
    , target: '_blank' // removed in 4.1
    , hrefTarget: '_blank' // used in 4.1
}