What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

16Dec/111

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: 'http://whatisextjs.com/BAHO/icons/disk.png'
    , text: 'Download'
    , href: 'http://WhatIsExtJS.com'
    , target: '_blank' // removed in 4.1    , hrefTarget: '_blank' // used in 4.1}
VN:F [1.9.22_1171]
Rating: 8.0/10 (18 votes cast)
ExtJS 4 Download File Button, 8.0 out of 10 based on 18 ratings
Comments (1) Trackbacks (0)
  1. Hello, Thank you for this wonderful tutorial. It is really helpful. I like to know is it possible to load the download files dinamically. ie to create items dynamilcally .. something like
    items:[
    for(n time )
    {
    xtype: ….
    ..
    }
    ]

    VA:F [1.9.22_1171]
    Rating: 1.0/5 (1 vote cast)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.